弹性容器总结

flex是一种一维布局模型，(grid网格布局是二维的)，flex布局一次只能处理一个维度的元素布局，一行或一列。

通过display: flex;将需要居中的元素的父元素设置为flex容器

两个关键概念：父容器container和子项目item

主轴默认自左向右(汉字书写习惯自左向右)，同时也是inline文本排列的方向

侧轴垂直于主轴默认自上而下，同时也是block块盒的排列方向。

---

1.父容器属性：flex-direction

这个属性就是设置主轴的方向

让我们确定主轴是行还是列！！！！

row：主轴沿着inline方向延伸 (inline：文字书写方向，汉字自左向右)

row-reverse： inline反方向 自右向左

column： 主轴沿着block排列的方向 (display: block的块盒，自上而下)

column-reverse： block的反方向 自下而上

这个位置如果我们去掉item元素的宽高，那么我们的子元素会默认在主轴方向的尺寸为内容撑开的大小，在测走的方向会撑满整个空间

---

2.父容器属性：justify-content

justify-content: 设置子项目在主轴方向上的对齐方式

flex-start：默认值，沿主轴起点对齐

flex-end：沿主轴终点对齐

center：沿主轴居中对齐

space-between：沿主轴空白居中分布，两侧贴边

space-around：沿主轴空白环绕分布

space-evenly：沿主轴空白均分分布

---

3.父容器属性：align-items

align-items: 设置单行子项目在侧轴方向上的对齐方式

flex-start：沿侧轴起点对齐。(高度随内容撑开)

center：沿侧轴居中对齐。(高度随内容撑开)

flex-end：沿侧轴终点对齐。(高度随内容撑开)

stretch：沿侧轴拉伸撑满整个容器。(不设置高度则拉伸，设置高度则固定)

baseline：沿着基线对齐。(高度随内容撑开)

normal：默认值。等同于stretch。

前5个子项目只设置宽度，不设置高度 最后一个子项目同时设置宽高

---

4.父容器属性：flex-wrap

flex-wrap：设置子项目元素是否换行

nowrap：默认值，不换行。(子项目在容器中空间不够的话，缩放以适应宽度。)

wrap：换行。(设置为换行后，才会按照设置的宽度呈现，空间不够会换行。)

wrap-reserve：换行并反转

没有设置高度的情况下，侧轴方向上，子项目的高度和会撑满整个容器(单个撑满，多个高度和撑满)

---

5. 父容器属性：align-content

align-content: 设置多行子项目在侧轴上的对齐方式(类似于justify-content)。

flex-start：默认值，沿侧轴起点对齐。(高度随内容撑开)

center：沿侧轴居中对齐。(高度随内容撑开)

flex-end：沿侧轴终点对齐。(高度随内容撑开)

space-between：沿侧轴空白居中分布，两侧贴边。(高度随内容撑开)

space-around：沿侧轴空白环绕分布。(高度随内容撑开)

space-evenly：沿侧轴空白均分分布。(高度随内容撑开)

stretch：高度自动时，所有子项目的高度和撑满父容器高度。设置高度则会按照固定高度呈现，且占据的高度不会变，这点是和flex-start不同的

normal：默认值。等同于stretch

---

6. 父容器属性：flex-flow

flex-flow：flex-direction和flex-wrap的简写属性，顺序任意。

---

子项目属性

1.子项目属性：align-self

align-self: 覆盖设置在父容器上面的align-items的属性值

auto：默认值，遵从父容器的align-items的属性值

flex-start、center、flex-end、stretch、baseline效果与align-items相同

子项目只设置宽度，不设置高度

---

2.子项目属性：order

order: 设置子项目的排列顺序

默认值：0

可取值：正整数、负整数、0，值越小越靠前

---

3.子项目属性：flex-basis

flex-basis：设置子项目在主轴上的初始尺寸

auto：默认值，相当于flex-basis没有设置值

可取值：不能为负值

优先级：min-width/max-width > flex-basis >width > 由内容撑开的宽度

---

4.子项目属性：flex-grow

flex-grow：定义子项目的拉伸因子

默认值为0(默认有剩余空间不会拉伸)

可取值：正整数、正小数、0。不能为负值。

只有当父容器有剩余空间的时候，这个属性值才能生效

注意：首先要明确一点，flex-grow和flex-basis的共同作用才能得到最终的宽度值

所有item拉伸后的最终宽度不能超过max-width

计算公式：

假设一个父容器包含三个item的flex-basis的分别为：item1、item2、item3

所有子item的flex-grow的总和为sum = item1 + item2 + item3

两种情况:

sum > 1

1.item1子项目最终的宽度值 = flex-basis之类的宽度值 + 剩余宽度 * ( item1 / sum)

2.另外item两个同理

sum < 1

1.item1子项目最终的宽度值 = flex-basis之类的宽度值 + 剩余宽度 * item1

2.另外item两个同理

3.这种情况下子项目是不能分配完剩余空间的，所以还会有剩余空间

---

5.子项目属性：flex-shrink

flex-shrink：定义子项目的收缩因子

1.可取值：正整数、正小数、0。不能为负值。

2.只有当子项目宽度超出父容器宽度，且没有设置为可换行的时候，这个属性值才起作用

3.注意：首先要明确一点，flex-shrink和flex-basis的共同作用才能得到最终的宽度值

4.默认值为1(默认子项目放不下且没换行就会收缩)

5.所有item收缩后的最终宽度不能小于min-width

---

6. 子项目属性：flex

flex：flex-grow flex-shrink flex-basis三个属性的简写属性

三个属性的顺序固定不变
一个值
number 0或1
px
initial、auto、none
两个值
first：number 0或1
second：
number
px
三个值
first：
number 0或1
second：
number 0或1
third：
px