什么是align-content

我记得有个属性叫align-content，好像跟布局有关。这个属性到底是干嘛用的？让我简单说一下吧，盘它。。

先说说呢， 这个align-content是CSS里面的一个属性，主要用在flex布局或者grid布局中。 至于吗？ 它的作用是控制多行内容在交叉轴上的对齐方式。

什么是交叉轴啊？就是垂直方向嘛！比如我们有一个盒子， 里面有几个小盒子排成多行， 上手。 那么align-content就是来控制这些小盒子之间的垂直对齐方式。

胡诌。 要想使用这个align-content， 先说说要满足几个条件：

1. 必须是多行布局
2. 必须有剩余空间
3. 对于flex布局需要设置flex-wrap: wrap

让我举个例子吧：

上面这个例子中呢，主要原因是设置了flex-wrap: wrap，所以当小盒子总宽度超过大盒子时会自动换行形成多行。然后我们可以给容器加上align-content来控制这些小盒子的对齐方式，操作一波。。

这个属性有几个常见的值：

• stretch默认值， 拉伸填满整个容器高度
• flex-start所有行靠近容器顶部
• flex-end所有行靠近容器底部
• center所有行居中显示
• space-娱乐ween第一行顶部对齐，再说说一行底部对齐，其他行平均分布
• space-around所有行平均分布且两端留白相同宽度

下面我给出具体示例：

stretch示例

css .container { align-content: stretch; /* 默认值 */ }

这样每一行都会自动拉伸占满可用高度。

center示例

这样所有内容都会居中显示。

space-娱乐ween示例

css .container { align-content: space-娱乐ween; }，看好你哦！

第一排顶着上边框、 再说说一排贴着下边框、中间各排均匀分开。

注意事项

要记住以下几点哦：

1. 必须是多行才能生效！如果只有一行的话这属性就没用。
2. 对于单独一项align-items比较适合。
3. 在grid布局里也可以用类似方法控制网格单元格之间的垂直对齐。
4. 必须确保容器有足够空间才能看到效果！

常见问题解答

Q：为什么我的页面没有反应？ A：可能你忘记了设置fle 我始终觉得... x-wrap或者grid-template-rows啦！

Q：stretch和space-娱乐ween哪个更好看？ A：看具体需求呗！一般首选center或者space-娱乐ween比较舒服些！

Q：能不能一边和gap一起使用？ A：当然可以呀！不过gap优先级更高一些哦~，原来如此。