当前位置：首页 > 文章列表 > 文章 > 前端 > Flexboxalign-content详解与使用技巧

Flexboxalign-content详解与使用技巧

2025-12-05 09:59:54 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《CSS Flexbox 中的 align-content 属性用于控制弹性容器内项目在交叉轴上的对齐方式，尤其在多行布局时效果显著。它与 align-items 不同，align-items 控制单行内的对齐，而 align-content 控制多行之间的对齐。1. align-content 的作用当 Flex 容器中的项目超过一行时（即 flex-wrap: wrap），align-content 会决定这些行在交叉轴上的对齐方式。2. 常见值值说明stretch默认值，拉伸以填充容器（默认行为）flex-start对齐到交叉轴起点flex-end对齐到交叉轴终点center在交叉轴上居中对齐space-between行之间等距分布，首行在起点，末行在终点space-around每行周围有相等的间距3. 使用示例.container { display: flex; flex-wrap: wrap; align-content: center; /* 多行内容在交叉轴上居中对齐 */ }4. 与 align-items 的区别`align-items》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

align-content用于多行flex容器中交叉轴对齐，需配合flex-wrap使用。其值包括flex-start、flex-end、center、space-between、space-around、space-evenly和stretch，默认为stretch，控制行间对齐方式，不影响单行布局。

css flexbox对齐方式align-content如何使用

align-content 用于控制 Flex 容器中多行 flex 项目在交叉轴（cross axis）上的对齐方式，但前提是容器内的项目必须换行（即 flex-wrap: wrap 或 wrap-reverse），否则它不会生效。

1. 基本前提：开启换行

align-content 只在多行 flex 容器中起作用。你需要设置：

flex-wrap: wrap; —— 允许项目换行
或 flex-wrap: wrap-reverse;

如果所有项目都在一行，align-content 不会产生任何效果。

2. align-content 的可选值及效果

以下是常用的 align-content 取值及其表现：

flex-start：各行向交叉轴起点对齐
flex-end：各行向交叉轴终点对齐
center：各行在交叉轴居中对齐
space-between：行与行之间等距分布，首行在起点，末行在终点
space-around：每行周围分配相等空间
space-evenly：所有行之间的间距以及与容器边缘的间距都相等
stretch（默认值）：当行高度未设定时，拉伸填满容器交叉轴空间

3. 实际示例

HTML 结构：

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

CSS 样式：

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-content: center; /* 控制多行垂直居中 */
  border: 1px solid #ccc;
}
<p>.item {
width: 100px;
height: 50px;
}</p>

当项目换行成两行时，这两行会在容器中垂直居中对齐。