css - flex布局

采用 Flex 布局的容器称为【Flex 容器】,所有子元素自动成为【容器成员】,成为【Flex 项目】

Flex 容器默认存在【两根轴】,水平的【主轴】和垂直的【交叉轴】

Flex 容器属性

  • flex-direction:决定主轴的方向(项目的排列方式),可选值:【row、row-revers、colum、colum-reverse】
  • flex-wrap:默认情况下,项目都排列在轴线上,如果超出一行,该属性定义如何换行,可选值:【nowrap、wrap、wrap-reverse】
  • justify-content:定义项目在主轴上的对齐方式,可选值:【flex-start、flex-end、center、space-between、space-around】
  • align-items:定义项目在交叉轴上的对齐方式(单行或多行),可选值:【flex-start、flex-end、center、baseline、stretch】
  • align-content:定义多根轴线的对齐方式(多行),如果项目只有一根轴线则不生效,可选值:【flex-start、flex-end、center、space-between、space-around、stretch】

猜你喜欢

转载自blog.csdn.net/M_wolf/article/details/81354988