弹性盒子flex

弹性盒子flex

• 弹性盒子由弹性容器(container)和弹性子元素(item)组成。
• 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
• 弹性容器内包含了一个或多个弹性子元素。

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

flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置
flex-direction: row | row-reverse | column | column-reverse

justify-content

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐，其实就是容器内的子元素在横轴方向上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around

align-items

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch

flex-wrap

flex-wrap 属性用于指定弹性盒子的子元素换行方式
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit

• nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
• wrap - 弹性容器为多行。当弹性容器单行不够放下所有子元素时，弹性子项溢出的部分会被放置到新行，子项内部会发生断行

align-content

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐

弹性子元素属性(针对单个元素进行设置)

• order 属性设置弹性容器内弹性子元素的属性（-1，0，1）
  • .first { order: -1/1;} 该子元素排在最前面/最后面
• margin
  • 使用弹性盒子，居中变的很简单，只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中
• align-self
  • align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式