align-content

Align-content控制多行之间的交叉轴(即，如果弯曲方向是行，则为垂直方向，如果弯曲方向是列，则为水平方向)定位。

(想象一段文字是垂直展开的，向上堆叠，向下堆叠。这是在一个弯曲方向的行范例下)。

对齐项目

Align-items控制单个伸缩元素行的交叉轴。

(试想一下，如果一个段落中包含一些普通文本和一些高难度的文本，比如数学公式，每一行是如何对齐的。在这种情况下，它将是底部，顶部，或中心的每一种类型的文本在一行将对齐?)

来自flexboxfroggy.com的例子:

这将花费你10-20分钟，在21级你会找到你的问题的答案。

Align-content决定行与行之间的间距 Align-items决定在容器中如何将项目作为一个整体进行对齐。 当只有一行时，align-content没有作用

在阅读了一些答案后，他们正确地识别出，如果flex内容没有被包装，对齐内容不会产生影响。然而，他们不理解的是，当有包装内容时，对齐项仍然发挥着重要作用:

在下面的两个示例中，align-items用于将每行中的项居中，然后我们更改align-content以查看其效果。

示例1:

align-content: flex-start;

示例2:

    align-content: flex-end;

代码如下:

<div class="container">
    <div class="child" style="height: 30px;">1</div>
    <div class="child" style="height: 50px;">2</div>
    <div class="child" style="height: 60px;">3</div>
    <div class="child" style="height: 40px;">4</div>
    <div class="child" style="height: 50px;">5</div>
    <div class="child" style="height: 20px;">6</div>
    <div class="child" style="height: 90px;">7</div>
    <div class="child" style="height: 50px;">8</div>
    <div class="child" style="height: 30px;">9</div>
    <div class="child" style="height: 40px;">10</div>
    <div class="child" style="height: 30px;">11</div>
    <div class="child" style="height: 60px;">12</div>
</div>

<style>
.container {
    display: flex;
    width: 300px;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-end;
    background: lightgray;
    height: 400px;
}
.child {
    padding: 12px;
    background: red;
    border: solid 1px black;
}
</style>

在容器中，对齐项目将以水平和垂直的单行文本为中心，而对齐内容将表现为有多行文本或一个段落，并且从顶部对齐甚至单行文本，就像它是一个具有文本对齐:中心规则的段落一样。

这是我们得到的结果

align-content:center;

我从每个回答和访问博客中学到的是

横轴和主轴是什么

主轴为水平行，横轴为垂直列-为弯曲方向:行 主轴为垂直列，横轴为水平行-为弯曲方向:列

现在是align-content和align-items

Align-content是针对行，如果容器有(多于一行) align-content的属性

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Align-items用于行中的项目 对齐项的属性

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

如需更多参考，请访问flex

对齐项目和对齐内容的效果都是沿着交叉轴。

如果弯曲方向是行，那么主轴就是从左到右的，如果弯曲方向是列，那么主轴就是从上到下的。

在下面的例子中，我们假设弯曲方向是行，即主轴是从左到右，交叉轴是从上到下。

Align-content只有在有flex-wrap: wrap和容器中有多个flex-line时才有效。

如果有多个柔线，对齐内容的优先级高于对齐项。

什么是专线?

伸缩容器中伸缩项的每一行或每一列都是一条伸缩行。当容器中没有足够的空间时，就会出现多行，而flex项目将使用下一行(在flex方向:row;)来放入。在flex-direction:列中，它会将伸缩项添加到下一行。

例子

默认情况下，flex是一个灵活的容器，即它可以容纳任意数量的元素，除非我们指定了flex-wrap: wrap。如果没有wrap, flex-items将溢出容器(如果flex-direction为row)。

align-content例子

.container{ border: 5px solid #000; height: 100vh; display: flex; flex-wrap: wrap; align-content: flex-end; } .box{ height:100px; font-size: 2rem; width: 33.33%; } .box1{ background: purple; } .box2{ background: #ff8c00; } .box3{ background: lime; } .box4{ background: #008080; } .box5{ background-color: red; } <div class="container"> <div class="box box1">box 1</div> <div class="box box2">box 2</div> <div class="box box3">box 3</div> <div class="box box4">box 4</div> <div class="box box5">box 5</div> </div>

在上面的例子中，如果有flex-wrap: no-wrap，那么align-content不会影响我们的布局。

对齐项目例子

align-items属性确定伸缩项如何沿交叉轴在伸缩线内定位。

.container{ border: 5px solid #000; height: 100vh; display: flex; flex-wrap: wrap; align-items: flex-end; } .box{ height:100px; font-size: 2rem; width: 33.33%; } .box1{ background: purple; } .box2{ background: #ff8c00; } .box3{ background: lime; } .box4{ background: #008080; } .box5{ background-color: red; } <div class="container"> <div class="box box1">box 1</div> <div class="box box2">box 2</div> <div class="box box3">box 3</div> <div class="box box4">box 4</div> <div class="box box5">box 5</div> </div>

如果align-content和align-items被声明在具有flex-wrap: wrap属性的容器上，如果有多个flex-line，则align-content属性的优先级高于align-items。

align-content and align-items priority example .container{ border: 5px solid #000; height: 100vh; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-start; } .box{ height:100px; font-size: 2rem; width: 33.33%; } .box1{ background: purple; } .box2{ background: #ff8c00; } .box3{ background: lime; } .box4{ background: #008080; } .box5{ background-color: red; } <div class="container"> <div class="box box1">box 1</div> <div class="box box2">box 2</div> <div class="box box3">box 3</div> <div class="box box4">box 4</div> <div class="box box5">box 5</div> </div>