flex

flex容器语法及要点学习，flex 是常用的 css3 布局方式，可以用少量的代码高效的实现各种页面布局，是一个基础的但是必须会的基本技能，在面试中经常会用到。例如，最基本的让你实现元素的水平／

flex

• flex容器
  • flex-direction
    • 用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
    • row
      • 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。如果当前水平文档流方向是rtl（如设置direction:rtl），则从右往左。
    • row-reverse
      • 显示为行。但方向和row属性值是反的
    • column
      • 显示为列。
    • column-reverse
      • 显示为列。但方向和column属性值是反的。
  • flex-wrap
    • nowrap
      • 默认值，表示单行显示，不换行。
    • wrap
      • 宽度不足换行显示。
    • wrap-reverse
      • 宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。
  • flex-flow
    • flex-direction和flex-wrap的缩写
    • <‘flex-direction’> || <‘flex-wrap’>
  • justify-content
    • flex-start
      • 默认值。逻辑CSS属性值，与文档流方向相关。默认表现为左对齐。
    • flex-end
      • 逻辑CSS属性值，与文档流方向相关。默认表现为右对齐。
    • center
      • 表现为居中对齐。
    • space-between
      • 表现为两端对齐。
    • space-around
      • around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
    • space-evenly
      • evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
  • align-items
    • stretch
      • 默认值。flex子项拉伸。在演示中我们可以看到白蓝径向渐变背景区域是上下贯穿flex容器的，就是因为flex子项的高度拉伸到容器高度导致。如果flex子项设置了高度，则按照设置的高度值渲染，而非拉伸。
    • flex-start
      • 逻辑CSS属性值，与文档流方向相关。默认表现为容器顶部对齐。
    • flex-end
      • 逻辑CSS属性值，与文档流方向相关。默认表现为容器底部对齐。
    • center
      • 表现为垂直居中对齐。
    • baseline
      • 表现为所有flex子项都相对于flex容器的基线对齐。
  • align-content
    • stretch
      • 默认值。每一行flex子元素都等比例拉伸。
    • flex-start
      • 逻辑CSS属性值，与文档流方向相关。默认表现为顶部堆砌。
    • flex-end
      • 逻辑CSS属性值，与文档流方向相关。默认表现为底部堆放。
    • center
      • 表现为整体垂直居中对齐。
    • space-between
      • 表现为上下两行两端对齐。剩下每一行元素等分剩余空间。
    • space-around
      • 每一行元素上下都享有独立不重叠的空白空间。
    • space-evenly
      • 每一行元素都完全上下等分。