弹性盒模型

1. 容器的概念

指定父元素为 flex

.parent { display: flex; }
.parent_inline { display: inline-flex; }

指定之后 float clear vertical-align 会失效

父元素称为 flex container 子元素称为 flex item

容器默认包含 main axis 和 cross axis，
main start main end 为主轴的起始位置和结束位置
cross start cross end 为交叉轴的起始位置和结束位置

flex item沿主轴排列，main size cross size 为所占据的主轴和交叉轴的空间

2. container的属性

flex-direction flex-wrap flex-flow justify-content align-items align-content 为定义在容器上的属性

flex-direction 主轴的方向

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

flex-wrap item的换行方向

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

flex-flow direction、item的简写

justify-content 定义item在主轴上的对齐方式

flex-start    左对齐（默认值）
flex-end      右对齐
center        居中
space-between 两端对齐，项目之间的间隔都相等
space-around  两端对齐, 每个项目两侧的间隔相等

align-items 定义item在交叉轴上的对齐方式

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

align-content 多根轴线的对齐方式，单轴无效

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

3. item的属性

order flex-grow flex-shrink flex-basis flex align-self 属性定义在 item 上

order item的排列顺序

  数值越小，排列越靠前，默认为0

flex-grow item的放大比例

  默认0，即如果存在剩余空间，也不放大
  如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
  如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

flex-shrink item的缩放比例

  默认为1，即如果空间不足，该项目将缩小
  如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
  如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis 在分配多余空间之前，item占据的主轴空间

  默认auto，即项目的本来大小
  设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex

  flex-grow, flex-shrink 和 flex-basis 的简写
  默认 0 (1 auto)
  auto 1 1 auto
  none 0 0 auto

align-self item 的对齐方式

  允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
  默认 auto, 表示继承父元素的 align-items属性,
  如没有父元素则为 stretch
  .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }
  该属性可能取6个值，除了auto，其他都与align-items属性完全一致

弹性盒模型