flex布局: flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思.
首页第一步要给父盒子定义一个属性display: flex:
代码如下
效果图如下
接下来就以这6点介绍flex属性:
一、flex-direction是来定义容器里面盒子主轴:
默认为X轴:flex-direction: row, 代码如下
效果图如下:
y轴:flex-direction: column
效果图:
二、flex-wrap换行
flex布局不会自动换行,多加一个盒子,其他盒子会缩小大小给多加的盒子腾位置: 效果图如下: 4个盒子 5个盒子
默认是不换行的 当添加了flex-wrap:wrap这个属性,第一行装不下第5个盒子,盒子自动换行.
三、flex-flow是设置主轴和换行的缩写方式.
效果图:
这样写是和上面效果图实现的效果是一样的.
四、justify-content是设置主轴排列效果,在这主要介绍一下后三个.
默认效果顶部对齐 justify-content: baseline;
/* 尾部对齐 */
justify-content:flex-end;
/* 沿着主轴居中对齐 */
justify-content: center;
/* 平均分布,盒子左右两边间距是相等的 */
justify-content: space-around; 效果图:
/*贴紧两边,在平分剩余空间 */
justify-content: space-between;
/* 平均分布,容器与盒子之间距离相等 */
justify-content: space-evenly;
5、align-items设置单行元素属性,换行的多行元素不起作用,属性如下:
里面有个拉伸效果,这个效果在元素不设置高度的时候可以拉伸盒子
6、align-content设置多行元素属性,换行的多行元素不起作用,属性如下:
这里面的效果类似主轴效果,自己可以设置看看.
7.提高元素的层级性.
order添加到对应想要提高层级的盒子上,容器里面的第一个盒子的序号为0.
效果图如下
8.设置容器里面盒子所占等分.
1,让容器里面的盒子各占1等分
效果图如下:
1,让容器里面的其中一个盒子盒子各占3等分
效果图如下:
