flex弹性布局
特点:float失效; vertical-align失效; 拥有inline-block的优点
定义:flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
dispaly : flex ;
justify-content (对齐方式) : 1. flex - start 开始对齐
2.flex - end 结尾对齐
3.center 中间对齐
4.space - between 两边对齐
5.space - around 自动分配间隔
align-items (交叉轴对齐方式) : 与上述一致
flex-direction (主轴变化) : row 主轴水平 / column 主轴垂直
tips: flex容器默认不换行 若要换行 则添加 flex-wrap : wrap
flex-grow : 数字
flex-shrink : 数字
<style>
* {
padding: 0;
margin: 0;
}
.content {
width: 300px;
height: 800px;
display: flex;
flex-direction: column;
}
.main {
flex-grow: 1;
background-color: blueviolet;
}
.nav {
height: 100px;
background-color:blue;
}
</style>
<body>
<div class="content">
<div class="main"></div>
<div class="nav"></div>
</div>
</body>
布局如图