一、引言

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前大部分浏览器都已经支持Flex属性。

我也一直在使用Flex，但是有的属性也只是会用，一知半解，甚至有的属性就没用过，比如: order、flex-grow等。写这篇文章的目的主要还是做个总结与梳理，加深印象。

给大家推荐一款 flex相关的 小游戏，帮你记忆各属性flexboxfroggy.com/

二、概念：

1. 容器： 指要实现布局效果的父元素
2. 项目：要实现布局效果的子元素。
3. 主轴：子元素排列方向的轴为主轴，默认为x轴。
4. 交叉轴：与主轴垂直的轴为交叉轴。

三、容器的属性：

如果希望弹性布局的父元素独自占布局中的一行，就要设置父元素为display: flex。
如果希望弹性布局的父元素显示为行内元素的特征，与其他元素同在一行，可设置父元素为display: inline-flex;

  flex-direction: 改变主轴的方向。
      row: 默认值，x轴为主轴，项目从左向右排列
      row-reverse: 项目从右侧开始，从右向左排列
      column: 主轴为y轴，从上向下排列
      column-reverse: 由下向上排列。
  flex-wrap: 控制是否换行
      nowrap: 默认值，不换行。
      wrap:只要宽不够，就立即换行
  flex-flow: 是flex-direction和flex-wrap的简写
      默认值：flex-flow: row nowrap;
  justify-content: 在主轴上的对齐方式
      flex-start: 从起点到终点对齐。
      flex-end: 从终点到起点对齐
      center: 主轴居中对齐
      space-between: 两端对齐
      space-around: 每个项目的间距相同
  align-items: 交叉轴上的对齐方式
      flex-start:  以交叉轴的起点方向对齐
      flex-end: 以交叉轴的终点方向对齐
      center： 以交叉轴中线居中对齐
      baseline:  让项目以交叉轴的基线对齐
      stretch:  如果项目未设置尺寸，让项目在交叉轴占满所有空间

四、项目属性：

order: 指定项目的排列顺序，整数数字，无需单位，值越小越靠近起点
flex-grow:  项目的放大比例
flex-shrink: 项目的缩小比例
align-self: 某一个项目在交叉轴的对齐方式