flex布局相关

定义在容器上的属性:

justify-content属性定义了项目在主轴上的对齐方式。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐
  • space-around:每个项目两侧的间隔相等

align-items属性定义项目在交叉轴上的对齐方式。

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

flex-direction属性决定主轴的方向(即项目的排列方向)

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

定义在项目上的属性:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

你可能感兴趣的:(flex布局相关)