flex布局的运用

flex布局也被称为弹性盒子布局。

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

flex布局的作用

在父内容里面垂直居中一个块内容
使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度 / 高度可用
使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同

容器和内容

采用 flex 布局的区域，称为 “容器”（ container ），应用元素 display: flex，容器内部的元素，称为 “项目”（ item ）

// .container{
	display: flex;
}
<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

上面代码中， 最外层的 div 就是容器，内层的三个 div 就是项目。

容器的属性

*. flex-direction 主轴方向
*. flex-wrap 主轴一行满了换行
*. flex-flow 1和2的组合
*. justify-content 主轴元素对齐方式
*. align-items 交叉轴元素对齐方式//单行
*. align-content 交叉轴行对齐方式//多行

1.flex-direction

定义主轴方向就是项目的排列方向。

• row （默认）：从左到右 ltr ；从右到左 rtl
• row-reverse ：从右到左 ltr ；从左到右 rtl
• column: 相同， row 但从上到下
• column-reverse: 相同， row-reverse 但从下到上
  
  

2.flex-wrap

设置子容器的换行方式，默认情况下，子项目元素都将尝试适合一行 nowrap

• nowrap （默认）不换行
• wrap 一行放不下时换行
• wrap-reverse 弹性项目将从下到上换行成多行
  

3. align-items与justify-content的定义与区别

• align-items属性定义了项目在主轴上的对齐方式，如下面默认的方向为从左到右

• justify-content属性定义项目在交叉轴上如何对齐，如下面的方向为从上到下
  

当容器内有多行时，align-content 定义多行的对齐方式

总结

• flex-direction调整主轴方向（默认为水平方向）
• justify-content调整主轴对齐
• align-items调整侧轴对齐（子元素可以使用align-self覆盖）
• flex-wrap控制是否换行
• align-content堆栈（由flex-wrap产生的独立行）对齐
• flex-flow是flex-direction + flex-wrap的简写形式
• flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
• order控制子项目的排列顺序，正序方式排序，从小到大