Question

有人能告诉我align-items和align-content之间的区别吗？

Answer 1

flex-box的align-items属性沿着横轴将Flex容器内的项目对齐，就像justify-content沿主轴一样。（对于默认的flex-direction: row，横轴对应于垂直，主轴对应于水平。flex-direction: column这两个分别互换。）

以下是align-items:center的外观示例：

但是align-content适用于多行柔性框。当项目在一行中时，它不起作用。它根据其价值对齐整个结构。以下是align-content: space-around;的示例：

align-content: space-around; align-items:center的{{1}}看起来如何：

请注意第一个框和第一行中的所有其他框更改为该行的垂直居中。

以下是一些可以使用的codepen链接：

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Here's一支非常酷的笔，它可以显示并让你在flexbox中玩几乎所有东西。

Answer 2

首先，align-items适用于单行中的项目。因此，对于主轴上的单行元素，align-items将相互对齐这些项目，并且将从下一行的新视角开始。

现在，align-content不会干扰一行中的项目，而会自行干扰。因此，align-content将尝试将行相对于彼此和flex容器对齐。

检查这个小提琴：https://jsfiddle.net/htym5zkn/8/

Answer 3

我发现示例http://flexboxfroggy.com/非常有用。

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

align-content 确定行之间的间距，而 align-items 确定整个项目在容器内的对齐方式。当只有一行时， align-content 无效

Answer 4

我在浏览器上检查了它们。

当值为拉伸时，

align-content可以更改行的方向或行的宽度，或者为space-between，space-around，{{flex-start，flex-end values，{align-items行之间或周围添加空格1}}，align-content。

align-items可以更改线条区域内的项目高度或位置。当项目没有被包装时，它们只有一条线，它的区域总是伸展到弹性框区域（即使项目溢出），align-items对单行没有影响。因此它对未包装的项目没有影响，只有align-items可以更改项目位置或在所有项目位于一行时拉伸它们。

但是，如果它们被包裹，则每行中都有多行和多个项目。如果每一行的所有项目具有相同的高度（对于行方向），那么该行的高度将等于那些项目的高度，并且您不会通过更改align-content值来看到任何效果。

因此，如果您希望在项目被包装并且具有相同高度（行方向）时foo影响项目，则首先必须使用具有拉伸值的<id>以扩展线条区域。

Answer 5

<强>对齐含量

align-content控制横轴（即flex-direction为row时的垂直方向，flex-direction为column时的水平方向）< em>多个行相对于彼此。

（认为段落的行是垂直展开的，堆叠在顶部，朝向底部堆叠。这是在flex-direction行范例下。

<强> ALIGN-项

align-items控制单个flex元素行的交叉轴。

（想想一个段落的单个行是如何对齐的，如果它包含一些普通文本和一些更高的文本，如数学公式。在这种情况下，它将是每个类型文本的底部，顶部或中心。将对齐的线？）

Answer 6

align-items 和 align-content 的影响都沿着横轴。

假设 flex-direction 是 row 那么主轴是 Left to Right，如果 flex-direction 是 column 那么主轴来自 {{1} }.

所以在下面的例子中，我们假设 top to bottom 是 flex-direction，即主轴从左到右，横轴从上到下。

<块引用>

row 仅在有 align-content 且容器中有多个 flex-wrap: wrap 时才有效。

<块引用>

flex-line 如果有多个 flex-line，则优先级高于 align-content。

什么是柔性线？

弹性容器中的每一行或每一列弹性项目都是一条弹性线。当容器中没有足够的空间时会出现多行，并且弹性项目会占用下一行（在 align-items 中）以适应。在 flex-direction: row; 中，它会将弹性项目添加到下一行。

example

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

对齐内容示例

row

.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-items 属性决定了弹性项目如何在弹性线内沿横轴定位。

align-content

.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-line，那么 flex-wrap: wrap 属性的优先级高于 {{1 }}。

align-content 和 align-items 优先级示例

align-content

align-items

Answer 7

我也有同样的困惑。在根据上述许多答案进行了一些修补之后，我终于可以看到不同之处。以我的拙见，最好用满足以下两个条件的flex容器来证明这种区别：

flex容器本身具有高度限制（例如min-height: 60rem），因此对于其内容可能会变得太高
包含在容器中的子项具有 不均匀的高度

条件1 帮助我了解content相对于其父容器的含义。当内容与容器齐平时，我们将看不到来自align-content的任何定位效果。只有当我们在横轴上有多余的空间时，我们才开始看到它的效果：它将内容相对于父容器的边界对齐。

条件2 帮助我可视化align-items的效果：它将项目彼此相对对齐。

这是一个代码示例。原材料来自Wes Bos' CSS Grid tutorial（21。Flexbox与CSS Grid）

示例HTML：

  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item"></div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>

示例CSS：

.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

示例1 ：让我们缩小视口，以使内容与容器齐平。这是align-content: flex-start;无效的时候，因为整个内容块都紧紧地塞在了容器内（没有多余的空间可以重新放置！）

另外，请注意第二行-查看项目在它们之间如何居中对齐。

示例2 ：随着我们扩大视口，我们不再有足够的内容来填充整个容器。现在我们开始看到align-content: flex-start;的效果-它使内容相对于容器的顶部边缘对齐。

这些示例基于flexbox，但是相同的原理也适用于CSS网格。希望这会有所帮助：）

Answer 8

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

横轴和主轴是什么

主轴是水平行，交叉轴是垂直列-对于flex-direction: row
主轴是垂直列，交叉轴是水平行-对于flex-direction: column

现在align-content和align-items

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;
}

对齐项用于行中的项目对齐项的属性

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

有关更多参考，请访问flex

Answer 9

他们已经阅读了一些答案，可以正确地识别出align-content如果没有包装flex内容则不起作用。但是，他们不了解的是，align-items在包装内容时仍起着重要作用：

在下面的两个示例中，使用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>

Answer 10

主要区别在于元素的高度不一样！然后你可以看到在行中它们都是中心\ end \ start

Answer 11

根据我对here的理解：

当您使用align-item或justify-item时，您将分别沿着列轴或行轴调整“网格项内的内容。”

但：如果使用align-content或justify-content，则将位置设置为沿列轴或行轴的网格。当你在一个更大的容器中有一个网格并且宽度或高度不灵活时（使用px），就会发生这种情况。

Answer 12

align-items 垂直扩展子元素，它们之间有空间

align-content 将它们组合在一起，就好像它们是一个元素

align-content和align-items之间的区别是什么？

12 个答案:

示例1：

示例2：