弹性盒模型学习

一、弹性盒布局

   1、弹性盒布局的容器指的是采用了弹性布局的DOM元素，而弹性布局的条目指的是容器中包含的子DOM元素。最外围的边框表示的是容器，而编号1和2的边框表示的是容器中的条目。

   弹性盒布局中有两个相互垂直的坐标轴：一个是主轴,另一个称为交叉轴。主轴并不固定为水平方向的X轴，交叉轴并不固定为垂直方向的y轴。

• 弹性盒模型，使用display：flex 来声明使用弹性盒模型，
• css3属性声明“flex-direction”用来确定主轴的方向，
• “flex-direction”属性可选值及其含义如下

2、属性值 && 含义

---

• row（默认值）      主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是ltr 则排列的顺序是从左到右。如果是rtl,则相反。

---

• row-reverse          主轴为水平方向。排列顺序是从右到左

---

• column                 主轴为垂直方向。排列顺序从上到下。

---

• column-reverse     主轴为垂直方向。排列顺序为从下到上

---

属性值	含义
row（默认值）	主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是ltr 则排列的顺序是从左到右。如果是rtl,则相反。
row-reverse	主轴为水平方向。排列顺序是从右到左
column	主轴为垂直方向。排列顺序是从上到下
column-reverse	主轴为垂直方向。排列顺序是从下到上

    默认情况下，弹性盒容器的条目会尽量沾满容器在主轴方向上的一行。当容器的主轴尺寸小于所有条目总的主轴尺寸时，会出现条目之间相互重叠或超出容器范围的现象。CSS属性“flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行动。

3、”flex-wrap" 属性可选值如下

属性值	含义
nowrap	容器中的条目只沾满在主轴方向上的一行，可能出现条目相互重叠或超出容器范围的现象
wrap	当容器中的条目超出容器在主轴方向上的一行时，会把条目排列在下一行。下一行的位置与交叉轴方向一致。
wrap-reverse	与wrap 含义类似，不同的是下一行的位置与交叉轴的方向相反。

4、可以使用“flex-flow”属性把“flex-direction"和”flex-wrap"合并。

例：flex-flow:row wrap;

5、容器中的条目

    除了弹性布局中的容器之外容器中的条目也可以通过css属性来改变其布局行为。

6、条目的顺序

    默认情况下，容器中条目的顺序取决于他们在html标记代码中的出现顺序。可以通过“order"属性啦改变条目在容器中的出现顺序。对于代码中的html 标记添加css声明，运行之后的效果就是会暗中order 的顺序排

7、条目尺寸的弹性

    弹性布局的核心在于容器中条目的尺寸是弹性的。容器可以根据本身尺寸的大小来动态调整条目的尺寸。当容器存在空白空间时，条目可以扩展尺寸以占据额外的空白空间；当容器空间不足，条目可以缩小尺寸以防止超出容器范围。

条目尺寸的弹性由3个CSS属性来确定，分别是
flex-basis 、flex-grow 、 flex-shrink

    flex-basic值为auto 实际使用的值是主轴尺寸属性的值即width或height属性值。如果主轴尺寸属性值也是auto 则使用的值由条目内容的尺寸来确定

flex-grow属性的值是一个没有单位的非负数，默认值是1.
flex-grow属性的值分别为1，2,3，那么当容器有空白空间时，这三个条目所获得的额外的空白空间为全部空间的1/6 1/3 1/2

---

8、使用flex 可以同时声明“flex-basic flex-grow flex-shrink ，格式为"none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]"。该属性的值的 3 个组成部分的初始值分别是"0 1 auto"。当属性"flex"的值为 none 时，相当于"0 0 auto"。当组成部分"flex-basis"被省略时，其值为 0%。

9、在主轴方向上的对齐。

• 这是通过容器上的“justify-content”属性来进行设置，可以调整条目在主轴方向上的对齐方式。
• 这种跳码样对齐方式的调整发生在修改条目的弹性尺寸和处理自动空白边之后。
• 当容器中的一行中的数目没有弹性尺寸，或是已经达到了最大尺寸时，在这一行上可能还有额外的空白空间。
• 使用“justify-content"属性可以分配这些空间。
• 该属性还可以控制当条目超出行的范围时的对齐方式、
  ”justify-content“属性的可选值和含义如下

属性值	含义
flex-start	条目集中在该行的起始位置。第一个条目与其所在行在主轴起始方向上的边界保持对齐，其余的条目按照顺序依次排列。
flex-end	条目集中在该行的结束方向。最后一个条目与其所在行在主轴结束方向上的边界保持对齐，其余条目按照顺序依次排列。
center	条目集中在该行的中央。条目都往该行的中央排列，在主轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则条目会在两个方向上超出同样的空间。
space-between	第一个条目与其所在行在主轴起始方向上的边界对齐，最后一个条目与其所在行在主轴结束方向保持对齐。空白空间在条目之间平均分配，使得相邻条目之间的空白尺寸相同。
space-around	类似space-between,不同的是第一条目和最后一个条目与该行的边界之间同样存在空白空间，该空白空间的尺寸是条目之间的空白空间尺寸的一半。

10、交叉轴方向的对齐

    容器使用“align-items"来设置容器中所有条目在交叉轴上默认的对齐方式。而条目上的”align-self“用来覆盖容器指定的对齐方式。属性”align-items“的可选值和含义如下

属性值	含义
flex-start	条目与其所在行在交叉轴起始方向上的边界保持对齐
flex-end	条目与其所在行在交叉轴结束方向上的边界保持对齐
center	条目的空白边盒子在交叉轴上居中，如果交叉轴尺寸小于条目尺寸，则条目会在两个方向上超出相同大小的空间。
baseline	条目在基线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，他与所在行在交叉轴方向上的边界保持对齐
stretch	如果条目的交叉轴尺寸的计算值是auto ，则其实际使用的值会使得条目在交叉轴方向上尽可能占满。

属性"align-self"的可选值除了表中列出的之外，还可以设置为"auto"。当"align-self"的值为 auto 时，其计算值是父节点的属性"align-items"的值。如果该节点没有父节点，则计算值为"stretch"。

11、交叉轴空白处理

    当容器在交叉轴方向上有空白空间时，属性“align-content"用来对齐容器中的行。该属性类似”justify-content",只不过“justify-content：是在值周方向上对齐行中的条目。
当容器中只有单行时，该属性不起作用。

属性“align-content”的可选值和含义：

属性值	含义
flex-start	行集中于容器的交叉轴起始位置。第一行与容器在交叉轴起始方向上的边界保持对齐，其余行按照顺序依次排列。
flex-end	行集中于容器的交叉轴结束位置。第一行与容器在交叉轴结束方向上的边界保持对齐，其余行按照顺序依次排列。
center	行集中于容器的中央。行都往容器中央排列，在交叉轴其实方向和结束方向上都留有同样大小的空白空间。如果空白空间不足，则行会在两个方向上超出同样的空间。
space-between	行在容器中均匀分布。第一行与容器在交叉轴其实方向上的边界保持对齐，最后一行与容器在交叉轴结束方向上的边界保持对齐。空白空间在行之间分配，使得相邻行之间的空白尺寸相同。
space-around	类似于space-between ，不同的是第一行条目和最后一行条目与容器行的边界之间同样存在空白空间，而该空间的尺寸时行目之间的尺寸的一半。
stretch	伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。

属性“align-content”的不同值的布局效果