Flexbox（弹性盒子布局)是个什么东西？(这个不错)

最新推荐文章于 2025-06-15 09:08:55 发布

众乐乐_2008

最新推荐文章于 2025-06-15 09:08:55 发布

阅读量819

点赞数 14

CC 4.0 BY-SA版权

分类专栏：日常代码 VUE 文章标签： css3

本文链接：https://blog.csdn.net/liuruiaaa/article/details/146995193

日常代码同时被 2 个专栏收录

121 篇文章

订阅专栏

VUE

26 篇文章

订阅专栏

display: flex; 是 CSS 中的一个属性值，它表示将元素的布局模式设置为 Flexbox（弹性盒子模型）。这样，该元素就会成为一个弹性容器（flex container），其直接子元素（称为弹性子项，flex items）将按照弹性布局进行排列。

1. Flexbox 是什么？

Flexbox（弹性盒子布局）是一种一维布局模式，专门用于控制**横向（row）或纵向（column）**的元素对齐方式。它的特点包括：

子元素可以自动调整大小（根据内容或容器大小）
可以很方便地对齐、分布元素（如居中、对齐、间距调整）
可以改变元素的排列方向（水平或垂直）

2. `display: flex;` 语法

如果一个元素设置 display: flex;，那么它的子元素就会按照弹性布局排列：

.container {
  display: flex;
}

这样，.container 就变成了一个 Flex 容器，它的直接子元素（flex items）就会按照默认的水平排列。

3. Flex 容器的主要属性

display: flex; 之后，你可以使用以下属性来控制子元素的排列方式：

（1）主轴方向：`flex-direction`

决定子元素的排列方向：

.container {
  display: flex;
  flex-direction: row; /* 默认：横向排列 */
}

值	作用
`row`	水平方向（从左到右）（默认）
`row-reverse`	水平方向（从右到左）
`column`	垂直方向（从上到下）
`column-reverse`	垂直方向（从下到上）

（2）主轴对齐方式：`justify-content`

控制子元素在主轴上的对齐方式：

.container {
  display: flex;
  justify-content: center;
}

值	作用
`flex-start`	起点对齐（默认）
`flex-end`	终点对齐
`center`	居中对齐
`space-between`	两端对齐，元素之间均匀分布
`space-around`	均匀分布，但左右有边距
`space-evenly`	完全均匀分布

（3）交叉轴对齐方式：`align-items`

控制子元素在交叉轴上的对齐方式：

.container {
  display: flex;
  align-items: center;
}

值	作用
`stretch`	拉伸填充整个高度（默认）
`flex-start`	顶部对齐
`flex-end`	底部对齐
`center`	居中对齐
`baseline`	按文字基线对齐

（4）子元素的弹性：`flex-grow`

flex-grow 决定子元素能否伸展填满剩余空间：

.item {
  flex-grow: 1;
}

flex-grow: 0;（默认）→ 不伸展，按内容大小排列
flex-grow: 1; → 伸展填满剩余空间
flex-grow: 2; → 伸展空间是其他 flex-grow: 1; 元素的两倍

4. 一个完整示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 示例</title>
  <style>
    .container {
      display: flex;
      flex-direction: row; /* 横向排列 */
      justify-content: space-between; /* 两端对齐 */
      align-items: center; /* 垂直居中 */
      height: 200px;
      background-color: lightgray;
    }
    .item {
      width: 100px;
      height: 100px;
      background-color: steelblue;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

</body>
</html>

效果：

3 个 .item 水平方向排列
两端对齐（justify-content: space-between;）
元素在容器垂直方向居中（align-items: center;）

5. 总结

属性	作用
`display: flex;`	定义 Flexbox 容器
`flex-direction`	主轴方向（row/column）
`justify-content`	主轴对齐方式（居中、两端对齐等）
`align-items`	交叉轴对齐方式（顶部、居中等）
`flex-grow`	子元素伸展比例

Flexbox 可以大大简化响应式布局，比如水平垂直居中：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexbox（弹性盒子布局)是个什么东西？(这个不错)

1. Flexbox 是什么？

2. display: flex; 语法

3. Flex 容器的主要属性

（1）主轴方向：flex-direction

（2）主轴对齐方式：justify-content

（3）交叉轴对齐方式：align-items

（4）子元素的弹性：flex-grow