CSS Flex 属性

display: flex; 会创建一个主轴 main-axis。

父元素上 CSS 属性

flex-direction

主轴的方向用 flex-direction 属性指定。可选的方向有：row;row-reverse;column;column-reverse;

flex-wrap

默认，flex 布局只会占用一行， flex-wrap 可以设置是否换行。可选值：

  • nowrap: 默认，不换行。
  • wrap: 自顶向下换行。
  • wrap-reverse: 与 wrap-reverse 相反。

flex-flow

flex-flow: <‘flex-direction’> || <‘flex-wrap’>, flex-direction, flex-wrap 可以合写在一起用 flex-flow属性，默认是: flex-flow: row wrap;

justify-content

justify [‘dʒʌstɪfaɪ]，【印刷】调整(铅字间隔)使齐行；整(版)，整理…的版面

调整子元素在 main-axis 上的对齐方式，

  • flex-start: 靠 main-axis 的开始位置对齐。
  • flex-end: 靠 main-axis 的结束位置对齐。
  • flex-center: 居中对齐。
  • space-between: 均匀分布，开始和结束位置。
  • space-around: 均匀分布，间隔不相等。
  • space-evenly: 均匀分页，间隔相等。

align-items

align-items 定义 flex 元素与当前行垂直的轴 （cross-axis）的对齐方式。 可以认为 justify-content定义元素在 main-axis 上水平方向移动，而 align-items在则其相对的垂直方向移动。

  • flex-start: cross-start 元素都对齐在 top 位置。
  • flex-end: cross-end 元素都对齐在 bottom 位置。
  • center: 元素对齐在 cross-axis 的中间位置。
  • baseline: 元素与 baseline 对齐。
  • stretch: 默认，拉伸与容器对齐，但 min-width/max-width 仍然起作用。

align-content

当多行时候，才考虑用该属性。当有多行时，并且在 cross-axis 上有多余的间隔，则 align-content就是控制多行元素在 cross-axis 上的对齐方式，与 justify-content类似。单行时该属性无效。