I：Flex如何形成

弹性盒布局的形成需要在display属性上添加flex或者inline-flex，将其变为弹性盒。

---

II：Container和Items

首先我们一般在布局一个弹性盒时，需要弄清楚container和items，container代表主体，而其中的内容盒子就是我们的items。

---

III：Container中哪些东西能改变

(1)改变主轴方向：flex-direction

flex-direction有四个常用属性取值，row（从左往右）、row-reverse（从右往左）、column（从上往下）、column-reverse（从下往上）。

在flex布局中，你自己需要清楚的知道你所建造的items的顺序是怎样的，才可以不出错的进行构造。

（2）进行折行：flex-wrap

在弹性盒中，由于弹性盒并不会根据内容进行折行，所以我们需要添加一个属性，让它自己折行，那么就需要添加我们的flex-wrap属性。

flex-wrap一共有三个常用取值：nowrap（默认取值，不折行）、wrap（折行）、wrap-reverse（反方向折行。即：从底部开始，往上折行；不会改变主轴设置）

（3）对齐方式：justify-content

弹性盒对齐方式，一般我们常用的有：

flex-start（向主轴对齐。默认对齐方式）

flex-end（向主轴的对面对齐）

center（居中对齐）

space-between（两边收紧，向中间对齐）

space-around（两边留出一定空隙，向中对齐）

(4)次轴对齐方式（次轴默认为纵轴，主轴默认为横轴，主次轴可改变）

align-items取值有：

stretch:默认值。次轴所有内容都从方向位置开始向相对方向顶满。

flex-start：次轴所有内容根据有多少从方向位置开始向相对方向顶。

center：中部开始往两边顶

flex-end：从次轴的反方向往正常方向顶。

baseline：根据文字对齐。

（5）多行内容的分部

align-content的取值：

flex-start：把空隙留在下面，盒子往上顶。

flex-end：空隙留上面 ，盒子往上顶。

center：多于的高度两边平均分配。

stretch：从上开始（顶满），行的空隙平均分配。

space-between：上下两边不留空隙，空隙被中间内容的上下均分。

space-around：上下不顶满留空隙，平均分配空隙。

---

IV：Item中哪些东西能改变

（1）Order

这是一个优先级的设置，默认值为0，当你改变后，会按照主轴的方向，从小到大排列（可用负数）

（2）flex-grow

空间增大的分配比例，不写默认为均分（默认值由0表示），按照比例分配。

如果三个items分别写上1、3、4的话，那么增长的总空间分配也会按照1:3:4来分配。

（3）flex-shrink

如果说flex-grow是关联的增加的空间比例的话，那么flex-shrink就是关联的缩小的空间比例了。它会在需要变小空间的时候，按比例减少空间。

flex-shrink设的值越大，变小时减少的值就越多。

                                                      注：0为防止变小！！！，它的默认值为1！！！！

（4）align-self

它的取值和功能跟align-items一样，只不过 它控制的是单一的容器 而不是全局。