常用的flex布局属性总结

概述：
1、flex，即 flexible box，中文为弹性盒子
2、需要有flex container（弹性容器） 和 flex item（子元素），对弹性容器中的子元素进行弹性布局

1、元素正常情况下排列

 .container {
     width: 400px;
     height:400px;
     padding: 10px;
     border: 2px solid #dbdbdb;
 }
 .item {
     width: 100px;
     height: 100px;
     color: #fff;
     font-size: 30px;
 }
 .color1 {
     background-color: #b4b3ff;
 }
 .color2 {
     background-color: pink;
}
 .color3 {
     background-color: #803f64;
}

<div class="container">
    <div class="item color1"></div>
    <div class="item color2"></div>
    <div class="item color3"></div>
</div>

图1

2、flex布局排列

会消除块状属性，所有与块状相关的属性将失效，比如块状元素会独占一行，如图01，设置flex后会在一行排列

 .container {
     display: flex; 
 }

图2

3、flex布局主轴方向

 .container {
     flex-direction: row | row-reverse | column | column-reverse; 
 }

该属性决定主轴方向，有四种情况

1、row：横向正序排列，默认情况，主轴方向从左往右(→)

图3
2、row-reverse：横向倒序排列，主轴方向从右往左(←)
图4
3、column：纵向正序排列， 主轴方向从上到下(↓)
图5
4、column-reverse：为纵向倒序排列，主轴方向从下到上(↑)
图7

4、flex布局主轴方向对齐方式

 .container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
 }

该属性决定主轴对齐方向，有五种情况，以下按照主轴方向从左往右示例
1、flex-start：默认情况，沿主轴开始方向对齐

图8
2、flex-end：沿主轴相反方向对齐
图9
3、center：在主轴方向居中显示
图10
4、space-between：沿主轴方向两端对齐
图11
5、space-around：从主轴开始，项目两边间隔相同
图11

5、flex布局交叉轴对齐效果

.container {
   align-items: flex-start | flex-end | center | baseline | stretch;
}

交叉轴与主轴垂直，比如主轴在水平方向，则交叉轴在垂直方向
1、flex-start：沿交叉轴开始方向对齐

图12
2、flex-end：沿交叉轴结束方向对齐
图13
4、center：沿交叉轴方向居中对齐
图14
5、baseline：文字基线对齐
图15
6、stretch：如果元素不设置高度(交叉轴为纵轴)或者宽度(交叉轴为横轴)时，自动填充整个容器
图16

6、flex布局主轴换行

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

1、nowrap：默认不换行

图17
2、wrap：换行
图18
3、wrap-reverse，逆向换行，第一行会跑到第二行下面
图19