flex布局

一、什么是flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，采用flex布局的元素，被称之为flex布局容器，所以的子元素自动成为flex容器的子元素，容器默认存在两根轴线，主轴和交叉轴，项目默认沿主轴排列

本文介绍的flex布局的常用属性

二、容器的属性

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

flex-direction

设置主轴的方向

flex-direction:row|row-reverse|coulmn|column-reverse

row(默认值)

-- 从左往右

row-reverse

-- 从右往左

column

-- 从上往下

column-reverse

-- 从下往上

flex-wrap

默认情况下，项目都排列在一条直线上（轴线），该属性控制在空间不足的情况下，项目否换行，默认不换行

flex-wrap:wrap|nowrap|wrap-reverse

nowrap(默认值)

--不换行

wrap

-- 换行

wrap-reverse

--换行，但是第一行在下面

justify-content属性

定义子元素在主轴的排列方式

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start（默认值）

-- 左对齐

flex-end

-- 右对齐

center

-- 居中

space-between

-- 两端对齐，项目之间的间隔都相等

space-around

-- 每个项目两侧的间隔相等,与space-between不同的是，左右边界也有间隔。

align-items属性

align-items属性定义项目在交叉轴上如何对齐

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start（默认值）

--交叉轴的起点对齐。

flex-end

交叉轴的终点对齐。

center

交叉轴的中点对齐。

baseline:

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

stretch（默认值）

如果项目未设置高度或设为auto，将占满整个容器的高度。

三、项目的属性

• order
• flex-grow
• flex-shrink
• flex-basic
• flex
• align-self

order

用于设置flex布局中项的布局顺序，值越大越靠后。

order: 0(默认值) | <integer>;

flex-basic

flex-basis 指定了 flex 元素在主轴方向上的初始大小

• 备注：当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级

flex-grow

flex-grow: 0(默认值) | <number>;

flex布局的增长因子，该属性定义了在flex布局中，当有剩余空间（剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小）时，如何分配
具体的计算规则是：分配空间 = 剩余空间 × (子元素 flex-grow / 所有 flex-grow 值的总和)

假设容器的宽度为260px,子元素的宽度为50px;现在有四个子元素；
剩余空间 260 - 4*50 = 60;
设置第一个子元素flex-grow: 0,第二个flex-grow: 1；第三个：flex-grow: 2；第四个：flex-grow: 3；
那么最终计算得出子元素的宽度如下

• 第一个子元素：50px
• 第二个子元素：60px
• 第三个子元素：70px
• 第四个子元素：80px
  

flex-shrink

flex-shrink: 1(默认值) | <number>;

flex布局的收缩因子，定义了flex布局的收缩规则,计算规则为

• 收缩比例：每个子元素的收缩量与其 flex-shrink 值和 flex-basis 值的乘积成正比。例如，第一个子元素 的 flex-shrink 为 2、flex-basis 为 100px，第二个子元素 的 flex-shrink 为 3、flex-basis 为 200px，则 第一个子元素的收缩权重为 2 × 100 = 200，第二个子元素的收缩权重为 3 × 200 = 600

• 总权重： 总权重 = 所有项目的 flex-shrink × flex-basis 计算结果相加例如，第一个子元素和第二个子元素的总加权值为 200 + 600 = 800

• 实际收缩量：计算溢出空间（父容器宽度减去所有 flex-basis 总和）。每个子元素的实际收缩量 = (项目 flex-shrink × flex-basis / 总加权值) × 溢出空间。例如，假设父元素宽度为200px;第一个子元素宽度为100px;第二个子元素宽度为200px，则溢出空间为 100px，则项目 A 的收缩量为 (200 / 800) × 100 = 25px，项目 B 的收缩量为 (600 / 800) × 100 = 75px

• 最终宽度：
  项目最终宽度 = flex-basis - 实际收缩量；即第一个子元素宽度为100-25=75px;第二个子元素宽度为200-75=125px
  

flex

是flex-shrink、flex-grow、flex-basic的简写方式

align-self

定义单个项目在交叉轴上的对齐方式