Flex弹性布局

╰+攻爆jí腚メ 2023-01-02 15:28 275阅读 0赞

## 简介 ##

> Flexible Box的缩写，弹性布局，为盒模型提供最大的灵活性

## 容器 ##

任何容器都可以指定Flex布局，设置后，子元素的float,clear,vertical-align都失效

.box {
      display: flex;
      display: inline-flex;   //行内元素也可以使用Flex布局
    }

### 容器属性 ###

*  flex-direction  
    定义容器的子元素的排列方向

> row（默认值）: 水平方向，起点为左边  
> row-reverse: 水平方向，起点为右边  
> column: 垂直方向，起点为上端  
> column-reverse: 垂直方向，起点为下端

*  flex-wrap  
    定义如果一条轴排不下时，怎么换行

> nowrap（默认值）: 不换行  
> wrap: 换行，第一行在上方  
> wrap-reverse: 换行，第一行在下方

*  flex-flow  
    flex-direction属性和flex-wrap属性的简写，默认row nowrap

> flex-flow: row nowrap

*  justify-content  
    定义子元素在主轴（水平轴）的对齐方式

> flex-start（默认值）： 左对齐  
> flex-end：右对齐  
> center：居中  
> space-between：两端对齐，子元素之间间隔相等  
> space-around：每个项目两边间隔相等

*  align-items  
    定义成员在交叉轴（垂直轴）上的对齐方式

> stretch（默认值）：占满整个容器高度  
> flex-start: 上端对齐  
> flex-end：下端对齐  
> center：中点对齐  
> baseline：子成员中的第一行文字的基线对齐

*  align-content  
    定义多行子成员的对齐方式，如果只有一行，则该属性不起作用

> stretch（默认值）：每行高度相等，且行间，行与边框间隔相等  
> flex-start: 上端对齐  
> flex-end：下端对齐  
> center：中点对齐  
> space-between：与上下两端对齐，行间间隔相等  
> space-around：每行上下间隔相等

### 成员属性 ###

*  order  
    定义成员的排列顺序，数值越小越靠前，默认为0
 *  flex-grow  
    值为非负数，定义成员瓜分剩余空间的比例，数值越大占用空间越大，默认为0，即不放大

> **分配原则：**  
> 如果只有一个成员设置了 flex-grow 属性值：
> 
> 1.  如果flex-grow值小于1，则分配给它的是总剩余空间和这个比例的计算值。
> 2.  如果flex-grow值大于1，则独享所有剩余空间。
> 
> 如果有多个成员设置了 flex-grow 属性值：
> 
> 1.  如果 flex-grow 值总和小于1，则分配给元素的是总剩余空间和当前元素设置的 flex-grow 比例的计算值。
> 2.  如果 flex-grow 值总和大于1，则所有剩余空间被利用，分配比例就是 flex-grow 属性值的比例。
> 
> **示例：**  
> 容器为1000px，有6个100px的成员，则剩余400px的空间；
> 
>  *  单个成员设置flex-grow值，如果一个成员设置了flex-grow: 0.5，则该成员空间要增加0.5\*400px = 200px；如果设置了flex-grow: 1(或大于1)，则该成员空间要增加400px；
>  *  多个成员设置flex-grow值，如果有4个成员设置了flex-grow：0.1; 由于0.1 \* 4<1，则这四个成员的空间要增加0.1 \* 400px=40px；如果有4个成员设置了flex-grow：1，由于1 \* 4>1,则这四个成员的空间要增加1/(1+1+1+1) \* 400px=100px。

*  flex-shrink  
    定义成员瓜分溢出空间的比例，数值越大占用空间越小，默认为1，即不缩小

> **分配原则：**  
> 如果只有一个成员设置了 flex-shrink：
> 
> 1.  flex-shrink 值小于1，则收缩的尺寸不完全，会有一部分内容溢出 flex 容器。
> 2.  flex-shrink 值大于等于1，则收缩完全，正好填满 flex 容器。
> 
> 如果多个成员设置了 flex-shrink：
> 
> 1.  flex-shrink 值的总和小于1，则收缩的尺寸不完全，每个元素收缩尺寸占“完全收缩的尺寸”的比例就是设置的 flex-shrink 的值。
> 2.  flex-shrink 值的总和大于1，则收缩完全，每个元素收缩尺寸的比例和 flex-shrink 值的比例一样。

*  flex-basis  
    定义成员的固定水平长度，默认为auto，即成员原本的大小
 *  flex  
    flex-grow，flex-shrink和flex-basis的简介，默认为0 1 auto（后两个为可选属性）
 *  align-self  
    定义单个与其他成员不一样的对齐方式

> auto（默认值）：继承父元素的align-items属性，如果没有，则等同于stretch  
> stretch：占满整个容器高度  
> flex-start: 上端对齐  
> flex-end：下端对齐  
> center：中点对齐  
> baseline：子成员中的第一行文字的基线对齐

## 参考 ##

> 阮一峰大神（文章中有详细的图，想看图的可以跳转到该链接）http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html  
> flex-grow/flex-shrink详解：https://blog.csdn.net/u012372720/article/details/93998972