flex

本文参考了 阮一峰的博客 《Flex 布局教程：语法篇》；
在往常项目中，作为一个前端选手，更多的布局是依赖于display，position，float，margin，padding等属性进行基础布局，但是自从w3c提出了一种全新的方案 flex 布局，并且得到了所有浏览器的支持，大大地解放了我们的双手。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

采用flex布局的元素，成为flex容器，所有的子元素都是容器成员，成为flex项目。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置即和容器边框的交叉点为main start（主轴起始点），结束位置是main end；交叉轴的开始位置是cross start，结束位置是cross end；

一丶容器的属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

.box {
  flex-direction: row | row-reverse  | column | column-reverse
}

flex-direction可能有四个值：

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

flex-wrap

.box {
  flex-wrap: nowrap | wrap | wrap-reverse
}

flex-wrap 可能存在三个值（注意，如果子项目设置flex：1，当前属性是不生效的）

• nowrap（默认值）：不换行
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

flex-flow

.box {
  flex-flow: row nowrap
}

flex-flow是flex-direction和flex-wrap的简写，默认值是now和nowrap

justify-content

.box {
  justify-content： flex-start | flex-end | center | space-between | space-around
}

justify-content可能存在五个值，主要定义在水平主轴上的对齐方式；

• flex-start（默认值）：主轴的起点对齐
• flex-end：主轴的尾端对齐
• center： 主轴的居中对齐
• space-between：两端对齐，每个子项目的间隔都是一样的
• space-around：每个子项目的两侧的间隔都是相等的，所以子项目之间的间隔比项目与边框的间隔大一倍

align-items

.box {
  align-items: flex-start | flex-end | center | baseline | stretch
}

align-items可能存在五个取值，主要定义在交叉轴即垂直轴上的对齐方式：

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的尾端对齐
• center：交叉轴的居中对齐
• baseline：子项目汇总的第一行文字的基线对齐
• stretch （默认值）：如果子项目未设置高度或者设置为auto，将占满整个容器的高度

align-content

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

align-content定义了多根轴线的对齐方式，如果当前子项目只有一根轴线，那么该属性不起作用。

• flex-start：与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• center：与交叉轴的中点对齐
• space-between： 与交叉轴的两端对齐，轴线之间的间隔平均分布
• space-around： 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴

二丶项目的属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order
order属性定义子项目的排列顺序，数值越小，排列越靠前，默认是0

.box-item {
  order: 0
}

flex-grow
flex-grow属性定义项目的放大比例，默认是0，即如果存在剩余空间，也不放大。

.box-item {
  flex-grow: 0
}

flex-shrink
flex-shrink 属性定义了项目的缩小比例，默认是1，即如果空间不足，该项目将缩小

.box-item {
  flex-shrink: 1
}

flex-basic
flex-basic 定义了在分配多余空间之间，项目占据的主轴空间，浏览器会根据这个属性，计算主轴是否有多余的空间，它的默认值是0，就是项目本身的size;它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

.box-item {
  flex-basic: 0 | auto
}

flex
flex属性是 flex-grow，flex-shrink，flex-basis的简写，默认值是 0 1 auto。后两个属性是可选。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

box-item {
  flex:  none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self
align_self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items，默认值是auto，继承自父元素，如果没有父元素就等同于stretch

.box-item {
  align-self： auto | flex-start | flex-end | center | baseline | stretch;
}

（完）