flexbox布局速查手册

考虑到flexbox布局的各种css属性五花八门，长时间不用又会忘掉大半，以此有了这篇速查手册。

入门属性

• 主轴：Main-Axis、水平方向
• 侧轴：Cross-Axis、垂直方向
• flex容器：使用flexbox时，首先声明父容器为一个flex容器
• flex项目：当父容器显示设置为flex项目，其子元素就变成了flex项目。如当无需列表ul显示声明display属性为flex容器，无序列表ul就为flex容器。

flex容器的一些属性

• display: flex || inline-flex
• flex-direction: row || column || row-reverse || column-reverse
• flex-wrap: wrap || nowrap || wrap-reverse
• flex-flow(是flex-direction和flex-wrap两个属性的速记写法)
• justify-content: flex-start || flex-end || center || space-between || space-around
• align-items: flex-start || flex-end || center || strech || baseline
• align-content: 用于多行flex容器，排列效果和align-items值一样，除了baseline属性值

flex项目的一些属性

• order：使得flex项目在一个flex容器中重新排序
• flex-row：控制flex项目在容器有多余的空间如何放大，在没有额外的空间如何缩小
• flex-shrink：同上
• flex-basis：属性可以指定Flex项目的初始大小
• flex：是flex-grow、flex-shrink和flex-basis三个属性的速记属性
• align-self：auto || flex-start || flex-end || center || baseline || stretch

眼花缭乱有木有！

flex容器属性分析

• display
  对于flexbox而言，有两种形式可以设定，flex和inline-flex，其表现形式与block和inline-block差别不大。默认flex。

• flex-direction
  该属性控制着flex项目沿着主轴方向的排列方向。默认row。
  row值：flex项目沿着Main-Axis排列，从左到右，水平排列

• flex-wrap 和 flex-reverse
  flex-wrap控制flex容器的默认行为。flex容器会在一行内容纳所有flex项目，不换行排列，因为flex-wrap属性默认值nowrap

• flex-flow
  flex-flow是flex-direction和flex-wrap的两个属性的速记写法，可以类比border

  ul {
      flex-flow: row wrap;    //前者为flex-direction, 后者为flex-wrap
  }

• justify-content
  该属性主要定义了flex项目在主轴上（Main-Axis）的对齐方式，默认值是flex-start（让所有flex项目Main-Axis从开始边缘，左对齐开始）
  space-between属性让flex项目两者的间距相同。
  space-around属性让每个flex项目都具有相同的空间。

• align-items
  该属性类似justify-content，主要控制flex项目在侧轴（Cross-Axis）的对齐方式
  其中，baseline让flex项目在主轴上沿着基线对齐

• align-content
  该属性可类比align-items属性，控制多行flex项目在flex容器里的展现

flex项目属性分析

• order
  order属性允许在一个flex项目中重新排序，默认属性值为0，可类比z-index属性。

• flex-grow 和 flex-shrink
  这两个属性控制flex项目在容器的多余空间内的扩展，或者没有额外空间时如何缩小，接收大于或等于零的数。
  flex-grow默认值为0，即是不展开。
  flex-shrink默认值是1，即是父容器小于自身，会收缩。

• flex-basis
  flex-basis可以指定flex项目的初始大小，即是flex-grow和flex-shrink属性调整大小适应flex容器前。
  flex-basis可取任何width属性的单位（ %、em、rem、px），默认值auto，即是基于内容的多少自动计算。想固定宽度，则flex-basis: 100px

• flex
  flex是flex-grow、flex-shrink、flex-basis的速记属性

  li {
      flex: 0 1 auto; // 对应flex-grow、flex-shrink、flex-basis
  }
  
  // 相当于
  li {
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: auto;
  }

不设置flex-basis的值，则为绝对flex项目，flex-basis默认值为0（项目宽度不会随着内容多少而改变）
当设置了flex-basis，会得到相对flex项目（项目宽度会随着内容多少而改变）

flex: 0 0 auto 相当于 flex: none。
宽度是被自动计算，不过弹性项目不会伸展或者收缩（因为二者都被设置为零）。

flex: 1 1 auto 相当于 flex: auto。
弹性项目会填满可用空间，在缩放浏览器时也会随之收缩。

当有多个弹性项目，并且其初始宽度flex-basis被设置为基于零的任何值时，弹性项目的宽度被根据 flex-grow值的比例来计算。

• align-self
  该属性可以改变一个弹性项目沿侧轴的位置

其中，auto值选项，是将flex项目的值设置为父元素的align-items的值