容器属性

  • flex-direction —— 决定主轴方向，即排列方向
  • flex-wrap ——定义排列不下时，如何换行
  • flex-flow ——上述两属性的简写
  • justify-content ——在主轴上的对齐方式
  • align-items ——在交叉轴上如何对齐
  • align-content ——多根轴线的对齐方式

flex-direction

  1. flex-direction: row | row-reverse | column | column-reverse;

flex-wrap

  1. flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow

  1. flex-flow: <flex-direction> || <flex-wrap>;

justify-content

  1. justify-content: flex-start | flex-end | center | space-between | space-around;
  • space-between: 两端贴边；
  • space-around: 各项目自身区域内居中；

align-items

  1. align-items: flex-start | flex-end | center | baseline | stretch;
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

  1. align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目属性

  • order —— 定义项目的排列顺序
  • flex-grow —— 定义项目的放大比例
  • flex-shrink —— 定义项目的缩小比例
  • flex-basis —— 项目占据的主轴空间
  • flex —— 上述三个属性的简写
  • align-self —— 允许单个项目有与其他项目不一样的对齐方式

order

  1. order: <integer>; /*数值越小，排列越靠前，默认为0。*/

flex-grow

  1. flex-grow: <number>; /* default 0 */

值相等，等分空间；值不等，按比例放大。

flex-shrink

  1. flex-shrink: <number>; /* default 1 */

都等1，都等比缩小；等0，不缩小；负值无效

flex-basis

  1. flex-basis: <length> | auto; /* default auto 项目本来大小 */

用来计算主轴是否有多余空间

flex

  1. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 优先使用两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self

  1. align-self: auto | flex-start | flex-end | center | baseline | stretch;

默认值为auto，表示继承父元素的align-items属性，故也可覆盖