flexbox 常见属性用法

Flex box是一种用于布局的CSS模组,它提供了许多有用的属性来控制flex容器和flex项目的排列方式。

以下是一些常见的flex box属性用法:

设置弹性容器

display: flex; 将一个元素定义为flex容器,其子元素将成为flex项目。

flex-direction: row | row-reverse | column | column-reverse; 设定主轴的方向,决定flex项目的排列方向。

flex-wrap: nowrap | wrap | wrap-reverse; 设定flex项目是否可换行。

justify-content: flex-start | flex-end | center | space-between | space-around; 设定主轴上的对齐方式。

align-items: stretch | flex-start | flex-end | center | baseline; 设定交叉轴上的对齐方式。

控制flex项目

flex-grow: <number>; 定义flex项目的放大比例。

flex-shrink: <number>; 定义flex项目的缩小比例。

flex-basis: <length> | auto; 定义flex项目的初始长度。

order: <integer>; 设定flex项目的排列顺序。

align-self: auto | stretch | flex-start | flex-end | center | baseline; 设定单一flex项目在交叉轴上的对齐方式。