对齐内容 | align-content

CSSalign-content属性定义了浏览器如何在其容器的横轴上和周围的内容项之间分配空间，这是一个灵活的盒子容器。

/* Positional alignment */
align-content: center;     /* Pack items around the center */
align-content: start;      /* Pack items from the start */
align-content: end;        /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end;   /* Pack flex items from the end */
align-content: left;       /* Pack items from the left */
align-content: right;      /* Pack items from the right */

/* Baseline alignment */ 
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Distributed alignment */
align-content: space-between; /* Distribute items evenly
                                 The first item is flush with the start,
                                 the last is flush with the end */
align-content: space-around;  /* Distribute items evenly
                                 Items have a half-size space
                                 on either end */
align-content: space-evenly;  /* Distribute items evenly
                                 Items have equal space around them */
align-content: stretch;       /* Distribute items evenly
                                 Stretch 'auto'-sized items to fit
                                 the container */

/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;

/* Global values */
align-content: inherit;
align-content: initial;
align-content: unset;

该属性对single line flexible没有影响。

句法

值

start这些项目被包装在一起，向交叉轴中的对齐容器的起始边缘平装。

end在交叉轴中，这些项目被包装在对齐容器的末端边缘上，彼此平齐。

flex-start根据flex容器的交叉启动端，这些项将彼此对齐到对齐容器的边缘。

这仅适用于 flex 版式项目。对于不是 flex 容器的子项的项, 此值将像 start 一样处理. flex end The 项被打包到对齐容器的边缘, 这取决于 flex 容器的交叉端。

这仅适用于Flex布局项。对于不是Flex容器子级的项，此值将被处理为end.

center所述物品沿轴向对中容器的中心彼此平装。

left在交叉轴中，这些项目被包装在对齐容器的左边边缘上，彼此平齐。如果属性的轴与内联轴不平行，则此值被处理为start.

right在交叉轴中，这些项目被包装在对齐容器的右边边缘上，彼此平齐。如果属性的轴与内联轴不平行，则此值被处理为start.

baseline

first baseline

last baseline

指定参与第一个或最后一个基线对齐：将框的第一个或最后一个基准集的对齐基线与其基准共享组中所有框的共享的第一个或最后一个基准集中的相应基线对齐。

第一个基线的回退对齐方式为 "开始", 最后一个基线为 "结束". 空间之间项在对齐容器中沿十字轴均匀分布。每对相邻项之间的间距相同。第一个项目与主开始边缘齐平, 最后一项与主端边缘齐平. 空间在项在对齐容器中沿十字轴均匀分布。每对相邻项之间的间距相同。前一项和最后一项之后的空空间等于每对相邻项之间的一半空间. 空间 evenlyThe 项在对齐容器中沿十字轴均匀分布。每对相邻项之间的间距、主开始边和第一项以及主端边缘和最后一项都完全相同. stretchIf 沿十字轴的项目的组合大小小于对齐容器的大小, 任何自动大小的项目的大小都同样增加 (不按比例), 同时仍然尊重最大高度/最大宽度 (或等效功能) 强加的约束, 这样组合的大小就能将对齐容器沿十字轴. safeIf 该项的大小溢出对齐容器, 则该项与对齐模式的对齐方式为 "开始". unsafeRegardless 项和对齐容器的相对大小, 则授予给定的对齐值。

形式语法

flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

示例

CSS

#container {
  height:200px;
  width: 240px;
  align-content: center; /* Can be changed in the live sample */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

HTML

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

结果

规范

浏览器兼容性