HTML | DOM 样式 alignContent 属性

简介

alignContent 属性用于设置弹性盒子元素在交叉轴上的对齐方式，只有在弹性盒子元素的 flexWrap 属性为 wrap 或 wrap-reverse 时才有效。

语法

flex-container {
  align-content: center|flex-start|flex-end|space-between|space-around|stretch;
}

• center：弹性盒子元素在交叉轴上居中对齐。
• flex-start：弹性盒子元素在交叉轴上起点对齐。
• flex-end：弹性盒子元素在交叉轴上终点对齐。
• space-between：弹性盒子元素在交叉轴上两端对齐，元素之间的间隔平分剩余空间。
• space-around：弹性盒子元素在交叉轴上平均分配剩余空间，元素之间的间隔是元素到边框距离的一半。
• stretch：默认值，弹性盒子元素在交叉轴上拉伸以占据整个交叉轴的空间。

示例

示例 1

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  height: 200px;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
  flex-grow: 1;
}

上述示例中，align-content 属性设置为 center，弹性盒子元素在交叉轴上居中对齐。

示例 2

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  height: 200px;
  align-items: center;
  justify-content: center;
  align-content: space-between;
  flex-wrap: wrap;
}
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
  flex-grow: 1;
}

上述示例中，align-content 属性设置为 space-between，弹性盒子元素在交叉轴上两端对齐，元素之间的间隔平分剩余空间。

总结

alignContent 属性用于设置弹性盒子元素在交叉轴上的对齐方式，只有在弹性盒子元素的 flexWrap 属性为 wrap 或 wrap-reverse 时才有效。常用的值包括 center、flex-start、flex-end、space-between、space-around 和 stretch。