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

我已经在浏览器上检查过了。

align-content可以改变一行方向的高度，或者当它的值为stretch时改变列的宽度，或者为space-between， space-around， flex-start， flex-end values在行之间或周围添加空白空间。

align-items可以改变项目的高度或线区域内的位置。当项目没有被换行时，它们只有一行，它的区域总是被拉伸到flex-box区域(即使项目溢出)，align-content对单行没有影响。因此，它对没有被换行的项目没有影响，只有align-items可以改变项目的位置或当所有项目都在一行上时拉伸它们。

但是，如果它们被自动换行，则每行内有多行和项目。如果每一行的所有项都具有相同的高度(对于行方向)，那么该行的高度将等于这些项的高度，并且更改align-items值不会看到任何影响。

因此，如果你想通过align-items来影响项目，当你的项目被包装并且具有相同的高度(对于行方向)时，首先你必须使用align-content的拉伸值来扩展线条区域。

flex-box的align-items属性将伸缩容器内的项目沿交叉轴对齐，就像justify-content沿主轴对齐一样。(对于默认的flex-direction: row，交叉轴对应于垂直，主轴对应于水平。对于flex-direction: column，这两者分别交换)。

下面是align-items:center的一个例子:

.

下面是align-content: space-around;和align-items:center的外观:

请注意，第一行中的第三个方框和所有其他方框都在该行中垂直居中。

下面是一些代码依赖的链接:

< a href = " http://codepen。io / asim-coder /钢笔/ MKQWbb noreferrer“rel = > http://codepen.io/asim-coder/pen/MKQWbb < / >

< a href = " http://codepen。io / asim-coder /钢笔/ WrMNWR noreferrer“rel = > http://codepen.io/asim-coder/pen/WrMNWR < / >

这是一个超级酷的笔，它可以显示并让你在flexbox中玩几乎所有的东西。

首先，align-items用于单行中的项。因此，对于主轴上的单行元素，align-items将使这些元素彼此对齐，它将从下一行的新视角开始。

现在，align-content不会干扰一行中的项目，但rows本身。因此，align-content将尝试将行彼此对齐并伸缩容器。

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

align-content

align-content控制多个线相对的交叉轴(即，如果flex-direction是row，则垂直方向，如果flex-direction是column，则水平方向)定位。

(想象一段文字是垂直展开的，向上堆叠，向下堆叠。这是在flex-direction行范例下)。

对齐项目

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

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

从flexboxfroggy.com的例子:

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

align-content决定行与行之间的间距

对齐项目决定了元素在容器中的整体对齐方式。

当只有一行时，align-content没有效果

根据我从在这里中了解到的:

当您使用align-item或justify-item时，您正在分别沿列轴或行轴调整网格项中的内容。

我也有同样的困惑。在对上面的答案进行了一些修改之后，我终于看到了区别。在我看来，这种区别最好地体现在满足以下两个条件的flex容器上:

1. 伸缩容器本身有一个高度限制(例如，min-height: 60rem)，因此它的内容可以变成< em >太高< / em >
2. 容器中包含的子项具有< < em >不均匀高度/ em >

条件1帮助我理解content相对于它的父容器意味着什么。当内容与容器齐平时，我们将无法看到来自align-content的任何定位效果。只有当我们沿着十字轴有额外的空间时，我们才开始看到它的效果:它使内容相对于父容器的边界对齐。

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

下面是一个代码示例。原材料来自Wes Bos的CSS网格教程(21。Flexbox vs. 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;没有效果时，因为整个内容块紧紧地贴合在容器内(没有额外的空间来重新定位!)

另外，注意第二行——看看这些项目是如何居中对齐的。

这些例子是基于flexbox的，但是同样的原则也适用于CSS网格。希望这对你有所帮助。

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

横轴和主轴是什么

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

现在是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

在阅读了一些答案之后，他们正确地识别出，如果没有包装flex内容，align-content将不会产生任何影响。然而，他们不理解的是，当有包装内容时，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>

align-items和align-content的效果都沿着横轴。

如果flex-direction是row，那么主轴就是Left to Right，如果flex-direction是column，那么主轴就是top to bottom。

所以在下面的例子中，我们将假设flex-direction是row，即主轴是从左到右，交叉轴是从上到下。

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

如果有多条软线，align-content优先级高于align-items。

什么是专线?

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

< a href = " https://codepen.io/kumarmasterpraveen/pen/xxgxmZJ?编辑= 1100 noreferrer“rel = > < / >示例

默认情况下，flex是一个灵活的容器，即它可以容纳任意数量的元素，除非我们指定了flex-wrap: wrap。如果没有包装，弹性物品将溢出容器(如果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 和align-items优先级的例子

.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>

对齐项目将子元素垂直展开，子元素之间有空格。

align-content将它们捆绑在一起，就像它们是一个元素一样。

(如果弯曲方向为列)

而对齐项目将以容器内水平和垂直的单行文本为中心，align-content将表现得好像有多行文本，或一个段落和从顶部开始对齐单行文本，就像它是一个已经给出文本对齐:中心规则的段落一样。

这是我们得到的结果

align-content:center;

第一部分

对齐项目仅适用于单行框。假设容器内的一行中有4个盒子。然后使用对齐项目将这些盒子对齐成一行。如果flex-direction是row(默认值)，那么align-items将垂直排列框，如果它的column则水平排列框。

第二部分

继续上面的单行盒子，如果我们再增加一行4个盒子，现在有8个盒子，每行4个。这里align-content出现在图片中，如果我们应用align-content到容器，它将被应用到总共有8个盒子的两行。如果我们应用align-content:中心，它将在一个容器中居中。在这种意义上，align-content用于排列多行柔性盒子。

align-items: center, align-content: flex-start # EYZ0 < / p >

键属性是flex-wrap。当nowrap(或当十字轴上没有多余的空间)时，align-content没有效果。当包装或wrap-reverse时，如果十字轴上有额外的空间，它总是有一个效果(不管行数)。

比较以下四个方框: