子元素（flex项）

flex容器的直接子元素就自动成为具有flex布局属性的子元素，就是所谓的flex项。

如上所示的那4个浅蓝色div元素就是flex项。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

运行一下

flex项相关的属性有：

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

order属性

order属性可以定义flex项的排列顺序。

如上所示，flex项会根据order属性的值而从小向大排列。

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

运行一下

flex-grow属性

flex-grow属性定义某个flex项相对于其他flex项增长速度的程度。（该属性默认为0）

特别注意：这里的比例是生长速度的比例，并非是宽度的比例；在个flex项内容为空的情况下，可以做到如下所示，即生长速度比例就是宽度的比例。但如果每个flex项中有内容，宽度的比例就和flex-grow的比例不一样了。

<div class="flex-container">
  <div style="flex-grow: 1"></div>
  <div style="flex-grow: 1"></div>
  <div style="flex-grow: 2"></div> 
</div>

运行一下

flex-shrink属性

flex-shrink属性是定义某个flex项相对于其他flex项缩减速度的程度。（该属性默认为1，最好先把每个flex项先设置上具体的width吧；另外把该属性设置成0时，则意味着无穷减速，等价于无穷增速）

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink:2">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

运行一下

---

flex-grow和flex-shrink不好控制，也不常用，不要花太多精力去研究。知道这两个货是干啥的就ok啦~

---

flex-basis属性

通过flex-basis属性可以给flex项设置具体的宽度值。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:200px;">3</div>
  <div>4</div>
</div>

运行一下

flex属性 - 通吃

洒家在此，洒家要用flex属性通吃flex-grow、flex-shrink和flex-basis属性。如下所示：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

运行一下

align-self属性

通过定义具体某个flex项的align-self属性可以设置其在竖直方向上的对齐方式，等于在该元素上覆盖了外部flex容器align-items属性的效果。

注意一下，上面的例子的flex容器的高度被设置成了200px高。

案例1

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self:center">3</div>
  <div>4</div>
</div>

运行一下

案例2

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

运行一下