Flex弹性盒语法教程

一.什么是flex布局

flex 布局，就是弹性布局，可以简便、完整、响应式地实现各种页面布局。

二.flex布局的基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 元素（flex item），简称"元素"。

三.容器的属性

以下6个属性设置在容器上。

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

3.1 flex-direction属性 ：设置主轴的方向（即元素的排列方向）。

可选值

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

3.2 flex-wrap属性：设置弹性元素是否自动换行

可选值

nowrap（默认）：不换行。
wrap：换行，往下换行。
wrap-reverse：换行，往上换行。

3.3 flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
3.4 justify-content属性：设置主轴上的空白元素如何分配

可选值

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，元素之间的间隔都相等。
space-around：空白分布到元素的两侧

3.5 align-items属性：设置弹性元素在辅轴方向上的对齐方式。

可选值

flex-start：沿着辅轴起边对齐
flex-end：沿着辅轴终边对齐
center：居中对齐
baseline：基线对齐（使用很少）
stretch：设置同行元素的长度为相同的值  

3.6 align-content属性：设置辅轴上的空白元素如何分配

可选值

flex-start - 靠上对齐
flex-end - 靠下对齐
center -元素在中间，上下空白相等
space-between -空白在中间。
space-around - 空白环绕在两边

四、元素的属性

该属性可能取6个值。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self
  4.1 order属性：设置元素的排列顺序
  4.2 flex-grow属性：弹性元素的增长系数
  4.3 flex-shrink属性：弹性元素的缩减系数
  4.4 flex-basis属性：设置元素的基础长度（主轴），auto表示自适应
  4.5 flex属性：设置元素三个样式 （flex-grow，flex-shrink，flex-basis）默认值 为initial（0 1 auto）
  4.6 align-self属性：设置单个元素对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。