晕乎乎的flex布局

display:flex

关于那些迷迷糊糊的flex属性们

flex-direction 改变flex容器的主轴方向

• row 主轴以x轴 方向从左到右 （主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。）
• column 主轴以y轴 方向从上到下 （flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同）
• row-reverse 主轴以x轴 方向从从右到左 （表现和row相同，但是置换了主轴起点和主轴终点）
• column-reverse 主轴以y轴 方向从下到上 （表现与column相同，但是置换了主轴起点与主轴终点）

justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。

• flex-start 定义内容元素在主轴的起始位置对齐
• flex-end 定义内容元素在主轴的结束位置对齐
• center 定义内容元素在主轴的中心位置对齐
• space-between 定义内容元素平均分配在主轴上，第一个元素在主轴开始位置，最后一个元素在主轴结束位置
• space-around 定义内容元素平均分配在主轴上，第一个元素到行首的距离与最后一个元素到行尾的距离是相邻元素之间距离的一半

flex-wrap

• nowrap
  flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start 会根据 flex-direction
  的值 相当于 start 或 before。
• wrap
  flex 元素 被打断到多个行中。cross-start 会根据 flex-direction
  的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。
• wrap-reverse
  和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。

align-items 交叉轴

• baseline
  所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。