flex布局小结

关于flex布局

• flex布局的兼容性

  • chrome 21+
  • opera 12.1+
  • firefox 22+
  • Safari 6.1+
  • IE 10+

• 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

• 它的所有子元素自动成为容器成员

• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

  
  
  

• 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；

• 交叉轴的开始位置叫做cross start，结束位置叫做cross end；

• 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

• flex布局中容器的属性：

  • flex-direction：定义flex-item的排列方向

    • row（主轴方向main-axis，会超出容器的高度）
      
      
    • row-reverse（主轴方向）
    • column（交叉轴cross-axis；不会超出容器高度）
      
      
    • column-reverse（交叉轴反向）

  • flex-wrap：定义如何换行

    • nowrap（不换行，百分比缩放）
    • wrap（换行，第一行在上面）
    • wrap-reverse（换行，第一行在下面）

  • justify-content：定义flex-item在主轴（mian-axis）上如何对齐

    • flex-start（左对齐）
    • flex-end（右对齐）
    • center（居中对齐）
    • space-between（两端对齐，空隙相等）
    • space-around（可以理解为分散对齐，两个flex-item之间的间隔为一个flex-item与边界的2倍）

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


- `align-content`:定义了多根轴线的对齐方式(*如果项目只有一根轴线，该属性不起作用*)
    -  flex-start：与交叉轴的起点对齐
    -  flex-end：与交叉轴的终点对齐
    -  center：与交叉轴的中点对齐
    -  space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
    -  space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
    -  stretch（默认值）：轴线占满整个交叉轴

• flex-item布局中容器的属性(明天继续)