flex布局

flex 之前，布局采用盒子模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

首先确定两个概念：容器和项目

采用 Flex 布局(display:flex)的元素，称为 Flex 容器（flex container），简称"容器"。

它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器的属性

flex容器属性有6个：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

属性决定主轴的方向（即项目的排列方向）。

常用4个属性值：

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

flex-wrap如果一条轴线排不下，是否换行，如何换行。

常用3个属性值：

nowrap（默认）：不换行。

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

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

flex-flow

简化代码。是flex-direction与flex-wrap的合写。

默认值为row nowrap

flex-flow: flex-direction  flex-wrap

justify-content

容器内的项目在主轴方向上进行排列，这个属性决定了在主轴方向上，项目与项目之间的位置关系。

常用5个属性值：

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。

align-items

项目与项目之间在交叉轴（与主轴垂直的轴）方向上的位置关系

常用5个属性值：

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

在允许换行的前提下：当容器中有多行项目时，每一行项目就会产生一根主轴，多行项目就会产生多个主轴。这个属性决定这多根主轴之间的位置关系。如果项目只有一根轴线，该属性不起作用。

常用6个属性值：

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴

项目的属性

项目的属性也有6个：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

容器中有多个项目，项目的默认摆放是沿主轴方向，按文档中dom元素的书写顺序进行排列的。

order 属性用于更改排列顺序。数值越小，排列越靠前，默认为0。可以为负数。

flex-grow

放大因子。使用前提：主轴方向上有多余的空间可以让项目去“伸展”。默认为0。0表示不参与放大。

计算步骤：

1. 统计多余的空间：M=容器的宽度-所有项目宽度之和

2. 确定均分的份数：N=项目flex-grow的值之和

3. 计算单位空间P=M/N。

4. 项目放大后的宽度：R=宽度+P*当前flex-grow值

小结：

• flex-grow 越大，则分到的部分越多。
• 如果所有的项目flex-grow不为0，并且是一样大，则它们会等分这个多个部分
• 如果所有的项目flex-grow为0，则它们不会去参与分配。
• 如果有一个项目flex-grow为0，说明多余的空间它不能参与分配。

flex-shrink

缩小因子。使用前提：主轴方向上的空间不够，项目被压缩。

计算步骤：

1. 总差值，即需要被压缩的大小：M=容器的宽度-项目的宽度之和

2. 加权和：N =flex-shrink*项目宽度值之和

3. 缩小后的宽度 = 项目值 – 项目值 * flex-shrink /N * M。

小结：

• 默认为1，则一起被压缩

• 值为0，表示不参与压缩。

• 值越大，压缩的越厉害

flex-basis

项目在主轴上占据的大小。默认为auto(主轴是水平方向时就是宽度，主轴是垂直方向时：默认为height值。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-items属性。

end

flex 基础语法就是这些，实践出真知，点击去看案例