Css弹性盒(display:flex)

1.咱们先给盒子加一个 display:flex 让盒子变成弹性盒

2.给弹性盒设置主轴方向

flex-driection row (主轴方向为X轴)；

flex-driection row-reverse(主轴方向为X轴)

flex-driection colnum (主轴方向为y轴)；让子元素竖直排列

flex-driection colnum-reverse (主轴方向为y轴)；

由于我们主轴设置的是X轴 所以我们的侧轴为Y轴 如果flex-driection属性 加了reverses属性值

里面的子元素就会倒序排列

3.主轴的主要排列方式

justify-content:flex-start; 子元素默认从左至右排列；

justify-content:flex-end; 子元素从右至左排序

justify-content:center; 子元素全部居中

justify-content:space-between; 子元素先贴边后靠两边 再均分父级元素剩余的空间；

justify-content:space-evenly;子元素直接均分父元素的空间；

justify-content:space-around;子元素会给一个左右一样的间距；

4.侧轴的主要排列方式

align-content: flex-start;侧轴从上到下排列

align-content: flex-end;侧轴从下到上排列

align-content: center;侧轴居中排列

align-content: space-between;侧轴子元素先贴边后靠两边 再均分父级元素剩余的空间

align-content: space-around;侧轴子元素会给一个上下一样的间距；

align-content:stertch  侧轴的高会被拉伸(由于我们主轴设置的是X轴 所以我们的侧轴为Y轴)

但是要记住我们需要取消子元素的高；

{谨记：上面的属性如果要设置多行子元素属性 需要加换行属性

flex-wrap : wrap}

5.修改一行或者元素排列方式常用属性

align-items : flex-start; 

align-items : flex-end;

align-items : center; 让一行元素居中

align-items : stertch;让一行或一列元素 拉伸 （看情况需要不设置宽或高）