flex弹性布局

约 463 字大约 2 分钟

2025-03-14

提问

描述一下 Flex box

Flex Box

Flex Box 即弹性盒布局模型。

任何一个容器都可以指定为 Flex 布局。

采用 Flex 布局的元素，称为 Flex 容器，简称容器。它的所有子元素自动成为容器成员。

在容器上，可以设置以下属性：

flex-direction: 主轴的方向，默认值是 row
flex-wrap : 一条轴线排不下时，如何换行，默认值是 nowrap
flex-flow : flex-direction 和 flex-wrap 的简写形式，默认值是 row nowrap
justify-content 定义容器成员在主轴上的对齐方式
align-items 定义项目成员在交叉轴上的对齐方式
align-content 定义多根轴线的对齐方式，如果容器成员只有一根轴线，该属性不起作用

在项目成员上，可以设置以下属性：

order 定义成员的排列顺序。数值越小，排列越靠前，默认为 0
flex-grow 定义成员的放大比例，默认为 0
flex-shrink 定义成员的缩小比例，默认为 1
flex-basis 定义在分配多余空间之前，成员占据的主轴空间，默认为 auto
flex flex-grow, flex-shrink , flex-basis 的简写，默认为 0 1 auto
align-self 定义单个成员的对齐方式

总结

flex 布局是 css3 新增的布局方式，可以通过将一个元素的 display 属性声明为 flex 从而使元素成为 flex 容器。

一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴，可以声明主轴的方向、定义容器成员的主轴上的对齐方式，交叉轴的对齐方式、换行方式等。对容器成员，可以定义排列顺序、空间利用方式、对齐方式等。

贡献者