flex布局你真的搞懂了吗？通俗简洁，小白勿入~

Posted 2021-03-02 isremya

flex布局

　　用以代替浮动的布局手段；

　　必须先把一个元素设置为弹性容器；//display：flex；

　　一个元素可以同时是弹性容器和弹性元素;

　　设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

　　主轴：弹性元素排列的方向；

 

弹性容器的属性

1、flex-direction 决定主轴的方向

　　row：默认值，从左到右；

　　row-reverse：从右到左；

　　column：从上到下；

　　column-reverse：从下到上；

 

2、flex-wrap 决定是否换行

　　nowrap：默认值，不换行；

　　wrap：换行，第一行在上方；

　　wrap-reverse：换行，第一行在下方；

 

3、flex-flow

　　flex-direction和flex-wrap的简写形式，默认值是row nowrap；

　　//flex-flow： row wrap；

 

4、 justify-content 决定弹性元素在主轴上的对齐方式

　　flex-start：默认值，左对齐；

　　flex-end：右对齐；

　　enter： 居中；

　　space-between：两端对齐，弹性元素之间的间隔都相等（两侧的弹性元素与边框没有距离）；

　　space-around：每个弹性元素两侧的间隔相等（弹性元素之间的间隔比弹性元素与边框的间隔大一倍）

 

5、align-items 决定子元素如何在父盒子中垂直对齐（单行）

　　flex-start：沿辅轴的起点对齐，从起点一直排向（带箭头的）终点；

　　flex-end：沿辅轴的终点对齐，从终点一直排向起点；

　　center：居中对齐；

　　baseline: 基线对齐；

　　stretch：默认值，让子元素拉伸以适应父元素（子元素不给高度的前提下）；

 

6、align-content 决定多行垂直对齐的情况（对单行无效）

　　该属性生效的条件：

　　必须对父元素设置自由盒属性//display:flex;

　　并且设置排列方式为横向排列//flex-direction:row;

　　并且设置换行//flex-wrap:wrap；

　　属性值：

　　　　1）stretch：默认值，会拉伸容器内每一行的占用的空间，填充方式为给每一行的下方增加空白；

　　　　　　第一行默认从容器顶端开始排列。

　　　　2）取消行与行之间的空白并把所有行作为一个整体，

　　　　　　center：在纵轴上垂直居中；

　　　　　　flex-start：放在容器的顶部；

　　　　　　flex-end：放在容器的底部；

　　　　3）space-between：上面的行对齐容器顶部，最下面行对齐容器底部。留相同间隔在每个行之间。

　　　　　　（对齐就是贴紧，没有留空隙）；

　　　　　  space-around：每一行的上下位置保留相同长度空白，使得行之间的空白为两倍的单行空白。

 

弹性元素的属性

1、order 决定子元素的排序

　　数值越小越往前，可为负，默认为零；//order：1；

 

2、 flex-grow

　　决定子元素的伸展系数，在父元素的剩余空间中按比例分配；//flex-grow :1;

　　如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）;

　　如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

 

3、flex-shrink

　　决定子元素的收缩系数，当父元素的空间不足以容纳所有子元素；//flex-shrink :1;

　　如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小;

　　如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

 

4、flex-basis

　　指定的是子元素在主轴的基础长度；

　　若主轴为横向，则该值指定的是宽度，即纵向指定的是高度；

　　默认值是auto，表示参考元素自身的宽/高，有传具体数值则以该值为准；

 

5、flex ：增长 缩减 基础

　　flex-grow 、flex-shrink 、flex-basis的简写属性；

　　initial --- flex: 0 1 auto；

　　auto --- flex: 1 1 auto；

　　none --- flex: 0 0 auto；弹性元素没有弹性，不缩不减；

 

6、align-self

　　允许单个子元素有与其他子元素在纵轴上不一样的对齐方式，可覆盖align-items属性；

　　默认值为auto，表继承父元素的align-items属性，如果没有父元素，就等同于stretch

　　属性值： auto 、flex-start 、 flex-end 、 center 、baseline 、 stretch;

 

//花了两个小时整理，对我来说挺有用的，越是难点越要突破，一起加油叭，冲冲冲！！