flex布局学习笔记

display:flex设置成flex布局，子元素的float, clear, vertical-align属性失效。

容器属性

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

flex-direction

决定主轴方向

• row →
• row-reverse ←
• column ↓
• column-reverse ↑

flex-wrap

如何换行

• nowrap 不换行（宁愿压扁项目也不换行）
• wrap 换行，第一行在上方/左方
• wrap-reverse 换行，第一行在下方/右方

flex-flow

flex-direction和flex-wrap的简写

flex-flow: <flex-direction> <flex-wrap>

justify-content

决定项目在主轴上的对齐方式

• flex-start 左对齐
• flex-end 右对齐
• center 居中
• space-bwteen 对齐父容器两边，平分中间剩余的空间
• space-around 平分，每个项目的“左右margin”一样（margin不融合，所以中间的间隔是首尾两边的两倍）

align-items

决定项目在交叉轴上的对齐方式

• flex-start
• flex-end
• center
• baseline 项目第一行文字的基线对齐
  

  .flex-box {
      height: 500px;
      border: 1px solid #000;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: baseline;
      flex-wrap: wrap;
  }
  
  .child-box {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: #333;
      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 20px;
      box-sizing: border-box;
  }

  <div class="flex-box">
      <span class="child-box">1</span>
      <span class="child-box">2</span>
      <span class="child-box" style="padding-top:20px">3</span>
      <span class="child-box">4</span>
  </div>

• stretch 如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

定义多根轴线对齐方式，如果只有一根轴线（一行），该属性不起作用
对齐的参照物是 交叉轴

• flex-start 与交叉轴的起点对齐
• flex-end 与交叉轴的终点对齐
• center 与交叉轴的中点对齐
• space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around 每根轴线两侧的间隔都相等
• stretch 轴线占满整个交叉轴（如果有多行，均分交叉轴）

项目的属性

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

order

定义项目的排列顺序，数字越小越靠前。默认为0，允许为负数。

flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink

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

如果尽可能缩小后还是行宽过长，会突破容器。

flex-basis

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。建议优先使用这个属性。

• (默认) 0 1 auto
• auto 1 1 auto
• none 0 0 auto

align-self

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

• auto
• flex-start
• flex-end
• center
• baseline
• stretch