[Css] css3的flex布局

最新推荐文章于 2025-06-02 18:23:19 发布

weixin_30278311

最新推荐文章于 2025-06-02 18:23:19 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mybilibili/p/10288439.html

本文深入解析Flex布局的各项属性，包括容器和项目的属性设置，如flex-direction、flex-wrap、justify-content等，以及移动端设计与适配技巧。

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

flex思维导图

{"name":"flex","children":[{"name":"传统布局方式","children":[{"name":"display-position-float"}]},{"name":"设置容器display:flex"},{"name":"设置行内元素容器display:inline-flex"},{"name":"容器的属性","children":[{"name":"决定主轴的方向|flex-direction","children":[{"name":"row默认值,主轴为水平方向,起点在左端"},{"name":"row-reverse,主轴为水平方向,起点在右端"},{"name":"column,主轴为垂直方向,起点在上沿"},{"name":"column-reverse,主轴为垂直方向,起点在下沿"}]},{"name":"定义,如果一条轴线排不下,如何换行|flex-wrap","children":[{"name":"nowrap默认不换行"},{"name":"wrap换行,第一行在上面"},{"name":"wrap-reverse换行,第一行在下方"}]},{"name":"flex-direction和flex-wrap的简写|flex-flow","children":[{"name":"默认值为row,nowrap"}]},{"name":"定义了项目在主轴上的对齐方式|justify-content","children":[{"name":"flex-start默认值,左对齐"},{"name":"flexend,右对齐"},{"name":"center,居中"},{"name":"space-between,两端对齐,项目之间的间隔都相等"},{"name":"space-around,每个项目两侧的间隔相等"}]},{"name":"定义项目在交叉轴上如何对齐|align-items","children":[{"name":"flex-start:交叉轴的起点对齐"},{"name":"flexend:交叉轴的终点对齐"},{"name":"center:交叉轴的中点对齐"},{"name":"baseline:项目的第一行文字的基线对齐"},{"name":"stretch默认值:如果项目未设置高度或设为auto,将占满整个容器的高度"}]},{"name":"定义了多根轴线的对齐方式|align-content","children":[{"name":"flex-start:与交叉轴的起点对齐"},{"name":"flexend:与交叉轴的终点对齐"},{"name":"center:与交叉轴的中点对齐"},{"name":"space-between:与交叉轴两端对齐,轴线之间的间隔平均分布"},{"name":"space-around:每根轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍"},{"name":"stretch默认值:轴线占满整个交叉轴"}]}]},{"name":"项目的属性","children":[{"name":"项目的排列顺序|order","children":[{"name":"数值越小,排列越靠前,默认为0"}]},{"name":"定义项目放大比例|flex-grow","children":[{"name":"默认为0,存在剩余空间,也不放大"}]},{"name":"定义项目缩小比例|flex-shrink","children":[{"name":"默认为0,如果空间不足,该项目将缩小"}]},{"name":"定义了在分配多余空间之前,项目占据的主轴空间|flex-basis","children":[{"name":"默认值为auto,即项目的本来大小"}]},{"name":"flex-grow,flex-shrink和flex-basis的简写|flex","children":[{"name":"默认值为0,1,auto"}]},{"name":"允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性|align-self","children":[{"name":"auto"},{"name":"flex-start"},{"name":"flex-end"},{"name":"center"},{"name":"baseline"},{"name":"stretch"}]}]}]}