flex布局

最新推荐文章于 2025-12-05 16:05:23 发布

原创最新推荐文章于 2025-12-05 16:05:23 发布 · 431 阅读

CC 4.0 BY-SA版权

文章标签：

2 篇文章

订阅专栏

本文详细介绍了Flex布局的概念、容器与项目特性，包括flex-direction、flex-wrap、justify-content等关键属性，以及如何控制项目的排列、尺寸和对齐方式。

flex是弹性布局，用来为盒状模型提供最大的灵活性。

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

采用flex布局的元素，称为flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为flex项目，简称“项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），主轴的开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

容器有6个属性：

flex-direction ： row | row-reverse | colum | column-reverse
flex-wrap: nowap | wrap | wrap-reverse
flex-flow: <flex-direction> <flex-wrap> 简写形式
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 （align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。）

项目有6个属性：

order：<integer> 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow： <number> 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink： <number> 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。如果flex-shrink值为0，表示该项目不收缩。
flex-basis: <length> | auto 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
align-self: auto | flex-start | flex-end | center | baseline | stretch; 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。