完全掌握弹性盒布局（一）属性大扫荡

如果一个人要去管理十几个岛屿，对岛屿管理的第一步是了解每一个岛屿的情况，然后才是了解岛屿间的经济来往。知识也是这样，每一个知识点都是一个岛屿，先把每一个点了解透彻，才能灵活地将各个点串联、组合以此实现自己的目的。

弹性盒学习的第一步，就是对与弹性盒有关的每一个属性、每一点进行全面的扫荡。

1. flex 容器和 flex 项目

flex 项目与 flex 容器的关系通过名称就可以了解，flex 项目是 flex 容器中的元素，一个容器可以包含多个项目。使一个元素变为 flex 容器，只需将该元素的 disply 设为 flex。如果你想将行内元素设置为 flex 容器，可以将元素的 display 设置为 inline-flex。设置了 flex 容器后，容器的子元素会自动成为 flex 项。

<p>
  <span></span>
  <span></sapn>
</p>

p {
    daiplay: flex;
}

就像上面第一段代码,设置下方的 CSS 属性后，p 变为 felx 容器，p 内部的两个 span 元素就变为了 flex 项。

2. main axis（主轴）和 cross axis (交叉轴)

flex_terms.png

主轴是指沿着 flex 元素放置方向延伸的轴，主轴的开始的位置称为 main start ,主轴的结束的位置成为 main end 。垂直于主轴的是交叉轴，与主轴一样，交叉轴开始的位置称为 cross start ，结束的位置称为 cross end.默认情况下，主轴的方向默认是 row ,即 flex 项沿行由左向右进行排列。主轴的方向可以由容器的 flex-direction 属性改变。

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

row-reverse 指 flex 项由右向左进行排列，main start在为容器的最右边。column 则将主轴方向变为由上到下。

3.容器属性枚举

容器的属性上面已经提到了一个 flex-direction。其它的有：flex-wrap、flex-flow、align-items、justify-content、align-content。每一种属性的功能在这里先进行一个简短的概括，具体的使用在以后的章节中进行讨论。

1. flex-direction: 指定了内部元素是如何在子元素中布局的，定义了主轴方向。可以接受四个值，在前面已经提到。
2. flex-wrap: 指定 flex 项是单行显示还是多行显示，如果指定多行，该属性允许你指定项的堆叠方向（如：由左到右，或由右到左）。它有 no-wrap、wrap、wrap-reverse 三个值。
3. flex-flow: 该属性是 flex-direction 和 flex-flow 属性的缩写。如 flex-flow: row wrap ,相当于 flex-direction: row flex-flow:wrap
4. align-items: 定义 flex 项在交叉轴上的对齐。取值有 flex-start、flex-end、center、baseline、stretch ，默认为 stretch。
5. justify-content: 定义 flex 项在主轴上的对齐。取值有 flex-start(默认)、flex-end、center、space-between、sapce-end。
6. align-content: 定义了多根轴线的对齐方式，该属性对单行弹性盒子无效。取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

4.flex 项属性枚举

flex 项同样有六个属性：order | flex-grow | flex-shrink | flex-basis | flex | align-self

1. order: 定义 flex 项的排列顺序，它的值是一个整数。由小到大，值越大排列越靠后。
2. flex-grow: 定义项目如何放大，默认为零，为零时不放大。
3. flex-shrink: 指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。即指定元素的收缩规则（仅在默认宽度大于容器宽度时有效）
4. flex-basis: 指定了 flex 项在容器中初始小。
5. flex 是前面三个属性的缩写，即 flex: flex-grow flex-shrink flex-basis。
6. align-self: 指定一个或多个 flex 项的对齐方式，覆盖 align-items 指定的对齐方式。取值有 auto | flex-start | flex-end | center | baseline | stretch

5.属性的应用

弹性盒允许嵌套，即一个弹性盒内部也可以有一个或多个弹性盒，这样就能灵活实现各种各样的布局。属性的应用就像卡牌游戏，面对不同的情况挑选不同的卡牌并按不同的顺序进行组合，y以此更好的达到自己的目的。