弹性盒模型

弹性盒模型

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属性彻底一致