弹性盒子模型

最新推荐文章于 2025-06-02 14:15:12 发布

原创最新推荐文章于 2025-06-02 14:15:12 发布 · 393 阅读

CC 4.0 BY-SA版权

文章标签：

8 篇文章

订阅专栏

1 篇文章

订阅专栏

本文深入讲解Flex布局的核心属性，包括容器属性如flex-direction、flex-wrap等，以及项目属性如order、flex-grow等，帮助读者全面掌握Flex布局的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

容器

属性	值
flex-direction（项目的排列方向）	row / row-reverse / column / column-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 / lex-end / center / space-between / space-around / stretch

属性	值
order	（排列顺序数值越小排列越靠前默认为0）
flex-grow	（放大比例默认为0）
flex-shrink	（缩小比例默认为0）
flex-basis	（在分配多余空间之前，项目占据的主轴空间默认为auto）
align-self	（允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性默认为auto）

推荐一个大神的博客：阮一峰：flex布局教程