HTML元素怎么设置弹性布局_HTMLflex弹性布局的完整属性说明

要启用弹性布局需设置display:flex，容器属性控制子项排列方向、对齐方式和换行，子项属性定义伸缩性、尺寸与顺序，结合使用可高效实现一维布局如居中、等分和自适应结构。

要让HTML元素启用弹性布局（Flexbox），只需要在父容器上设置 display: flex 或 display: inline-flex，就能让其子元素变成弹性项目并沿主轴排列。下面详细介绍弹性布局的所有关键属性及其用法。

1. 容器属性：定义弹性容器的行为

这些属性应用于父容器（即设置了 display: flex 的元素）：

display: flex

使容器成为块级弹性容器，所有直接子元素自动成为弹性项目。

示例：

立即学习“前端免费学习笔记（深入）”；

container {
display: flex;
}

flex-direction

定义主轴方向，决定子元素的排列方向。

• row：从左到右（默认）
• row-reverse：从右到左
• column：从上到下
• column-reverse：从下到上

justify-content

定义项目在主轴上的对齐方式。

• flex-start：靠主轴起点对齐（默认）
• flex-end：靠主轴终点对齐
• center：居中对齐
• space-between：两端对齐，项目间间距相等
• space-around：每个项目两侧间距相等
• space-evenly：项目之间及边缘间距完全相等

align-items

定义项目在交叉轴上的对齐方式（垂直于主轴）。

• stretch：拉伸填满容器（默认，前提是没有设置高度）
• flex-start：顶部对齐
• flex-end：底部对齐
• center：居中对齐
• baseline：文字基线对齐

align-content

当有多行弹性项目时（换行情况下），控制行与行之间的对齐方式。单行无效。

• stretch：拉伸填满空间（默认）
• flex-start：行靠上对齐
• flex-end：行靠下对齐
• center：行居中
• space-between：行之间均匀分布
• space-around：每行周围有相等空间

flex-wrap

控制是否换行。

• nowrap：不换行（默认）
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

flex-flow

是 flex-direction 和 flex-wrap 的简写形式。

例如：

container {
flex-flow: row wrap;
}

2. 子项属性：控制每个弹性项目的具体行为

这些属性作用于弹性容器的直接子元素。

flex-grow

定义项目的放大比例，默认为0（不放大）。

如果所有项目都设为1，则等分剩余空间；某个设为2，则占据更多空间。

item {
flex-grow: 1;
}

flex-shrink

定义项目的缩小比例，默认为1（空间不足时自动缩小）。

设为0则不缩小。

item {
flex-shrink: 0;
}

flex-basis

设置项目在分配多余空间前的初始主轴尺寸，类似 width，但针对主轴。

• auto：根据内容大小决定（默认）
• 固定值：如 100px、20%

item {
flex-basis: 100px;
}

flex

是 flex-grow、flex-shrink、flex-basis 的简写。

常用写法：

• flex: 1 等价于 flex: 1 1 0；常用于等分空间
• flex: auto 等价于 flex: 1 1 auto
• flex: none 等价于 flex: 0 0 auto，表示不伸缩

order

定义项目的排列顺序，数值越小越靠前，默认为0，可为负数。

item3 {
order: -1;
}

align-self

允许单个项目有与其他项目不同的对齐方式，覆盖 align-items。

• auto：继承父容器的 align-items 值（默认）
• stretch、flex-start、flex-end、center、baseline

item2 {
align-self: center;
}

3. 实际使用建议

弹性布局非常适合做一维布局，比如导航栏、卡片排列、居中对齐等。

常见技巧：

• 水平垂直居中：display: flex; justify-content: center; align-items: center;
• 等分布局：flex: 1 给每个子项
• 圣杯布局左侧固定、右侧自适应：left { flex: 0 0 200px; } right { flex: 1; }

基本上就这些。掌握这些属性后，大多数页面布局都能轻松实现。