前端开发笔记--flex布局

flex布局：

个人觉得flex布局比起传统布局要优先得多（主要是容易使用），缺点是IE10及以上版本才能使用，甚至某些属性只有在IE11才能使用（而且我发现凡是不兼容主要IE的坑来的多，不是说其他浏览器没有）

不过微信小程序开发时完美适配。

回到主题：

                                        

使用flex布局的容器，内部元素自动成为flex项目（如上图items）display:flex;  IE10可用

提醒：flex项目中不能使用float,clear（设置左右两侧是否可以有浮动）,vertical-align（垂直对齐方式）

 

1、容器的属性： 

（1）flex-direction排列方式：row（默认水平排列），row-reverse（水平逆序），column（垂直方向），column-reverse

                         IE10可用

（2）flex-wrap换行：nowrap（自动缩小不换行，默认），wrap（换行），wrap-reverse（逆序换行）

                                      E11可用

（3）flex-flow：是上面（1）和（2）的集合，默认值为 flex-flow:nowrap row；IE10可用I

（4）justify-content水平对其方式：flex-start（左对齐），flex-end（右对齐），center（居中对齐），space-between（两端对齐），space-around（沿轴线均匀分布）

     IE10可用

                            

（5）align-items（垂直对齐方式）：flex-start（顶端对齐），flex-end（底部对齐），center（居中对齐），baseline（item中第一行文字对齐），stretch（当item未设置高度，item和容器等高对齐）

                     IE11可用               

                                 center                                                                     stretch

（6）align-content（多主轴时垂直方向上的对齐），使用这个属性后align-items无效。flex-start（顶部对齐），flex-end（底部对齐），center（居中对齐），space-between（两端对齐），space-around（沿垂直轴线均匀分布），stretch（各行将根据其flex-grow值延伸充分占据剩余空间）

                                          IE11可用

2、容器中元素的属性

（1）order：其值为整数，默认0，整数越小，排列越靠前。

IE11可用

（2）flex-grow：当容器有多余空间，item是否放大（主轴方向放大），默认0（即使有空间也不放大），有多余空间是按整数的比例放大

IE10可用

（3）flex-shrink：当容器空间不足时，item是否缩小，默认值为1，表示空间不足时，item自动缩小，值为整数，表示不同的缩小比例

中间两相对小一点我设置左右为1，中间为2           IE10可用

（4）flex-basis：表示项目在主轴占据的空间，默认值为auto，值可以是px，rem，%

我设置第一个为40%            IE10可用

（5）flex：是上面（2）（3）（4）属性的综合

（6）align-self：允许item有自己独特的在垂直轴上的对齐方式，默认为auto（和父元素align-items值一致），flex-start（顶部对齐），flex-end（底部对齐），center（居中对齐），baseline（item第一行文字底部对齐），stretch（当item未设置高度时，item将和容器等高对齐）

IE11可用