flex 布局

第一次接触flex布局好像还是在最开始入门的时候，做了一个小项目，布局的时候用到了flex，当时的印象就是，哇，这么简单就能垂直居中布局呀，哈哈。
附上最开始了解的途径：flex布局教程：语法篇－阮一峰

概念

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。

Container

弹性容器，包含着弹性项目的父元素。通过设置display属性的值为flex或inline-flex来定义弹性容器。
有主轴main axis 和侧轴 cross axis。
container的属性：

flex-direction [row|row-reverse|column|column-reverse] main axis 的方向
flex-wrap [nowrap|wrap|wrap-reverse] 默认情况下，项目都排在轴线上。flex-wrap属性定义，如果一条轴线排不下，如何换行
flex-flow [<flex-direction>||<flex-wrap> 上面两个的合体
justify-content [flex-start|flex-end|center|space-between|space-around] 主轴main axis对齐方式
align-items [flex-start|flex-end|center|baseline|stretch]侧轴cross axis对齐方式
align-content [flex-start|flex-end|center|space-between|space-around|stretch定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

Item

弹性容器的每个子元素都称为弹性项目。弹性容器直接包涵的文本将被包覆成匿名弹性单元。
item沿着main axis排布。
单个item所占的空间分别用main size和cross size表示。
item的属性：

order [<integer>] 排列顺序，默认0，决定哪些元素先出现
flex-grow [<number>] 放大比例，默认0，即如果存在剩余空间，也不放大。
flex-shrink 项目的缩小比例，默认0，即如果存在剩余空间，也不放大。
flex-basis [<length>|auto; /*default auto*/] 分配多余空间之前，项目占据的main size，默认auto
flex none|[<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] flex-grow, flex-shrink, flex-basis的简写，默认值为0 1 auto。后两个属性可选。

举个栗子🌰

使用flex实现垂直居中布局

<styles>
  .container {
    height: 500px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
  }
</styles>
<div class="container">
  <div>啦啦啦我垂直居中啦</div>
</div>

兼容性

将父元素定义为一个flexbox，则在父元素里的子元素们就被赋予了可以自由伸缩的能力，如下。

.container {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
}
.item {
  flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
}

Flexbox 浏览器兼容小结
 移动端全兼容flexbox速成班
 flex布局的兼容性
 使用css弹性盒子