align-items和align-content之间的区别是什么?
当前回答
关键属性是弹性包装。当nowrap(或当十字轴上没有多余的空间)时,align-content没有作用。当换行或反向换行时,如果十字轴中有额外的空间,它总是会产生影响(不管行数如何)。
比较以下四个方框:
其他回答
align-content
Align-content控制多行之间的交叉轴(即,如果弯曲方向是行,则为垂直方向,如果弯曲方向是列,则为水平方向)定位。
(想象一段文字是垂直展开的,向上堆叠,向下堆叠。这是在一个弯曲方向的行范例下)。
对齐项目
Align-items控制单个伸缩元素行的交叉轴。
(试想一下,如果一个段落中包含一些普通文本和一些高难度的文本,比如数学公式,每一行是如何对齐的。在这种情况下,它将是底部,顶部,或中心的每一种类型的文本在一行将对齐?)
在容器中,对齐项目将以水平和垂直的单行文本为中心,而对齐内容将表现为有多行文本或一个段落,并且从顶部对齐甚至单行文本,就像它是一个具有文本对齐:中心规则的段落一样。
这是我们得到的结果
align-content:center;
来自flexboxfroggy.com的例子:
这将花费你10-20分钟,在21级你会找到你的问题的答案。
Align-content决定行与行之间的间距 Align-items决定在容器中如何将项目作为一个整体进行对齐。 当只有一行时,align-content没有作用
第一部分
对齐项目只适用于单行的盒子。假设容器内的一行中有4个盒子。然后,align-items将应用于将这些框对齐到一行中。如果flex-direction是row(默认值),那么align-items将垂直排列框,如果它的column则水平排列框。
第二部分
继续上面的单行盒子,如果我们再增加一行4个盒子,现在有8个盒子,每行4个。这里align-content出现在画面中,如果我们对容器应用align-content,它将被应用到总共有8个盒子的两行。如果我们应用align-content:center,它将在容器中居中。在这种意义上,align-content用于排列多行灵活的盒子。
Align-items:居中,align-content: flex-start
在阅读了一些答案后,他们正确地识别出,如果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>