align-items和align-content之间的区别是什么?
当前回答
来自flexboxfroggy.com的例子:
这将花费你10-20分钟,在21级你会找到你的问题的答案。
Align-content决定行与行之间的间距 Align-items决定在容器中如何将项目作为一个整体进行对齐。 当只有一行时,align-content没有作用
其他回答
首先,align-items用于单行中的项目。因此,对于主轴上的单行元素,align-items会将这些元素各自对齐,并从下一行的新视角开始。
现在,align-content不会干扰一行中的项,而是会干扰行本身。因此,align-content将尝试根据彼此和flex容器对齐行。
检查这个小提琴:https://jsfiddle.net/htym5zkn/8/
align-content
Align-content控制多行之间的交叉轴(即,如果弯曲方向是行,则为垂直方向,如果弯曲方向是列,则为水平方向)定位。
(想象一段文字是垂直展开的,向上堆叠,向下堆叠。这是在一个弯曲方向的行范例下)。
对齐项目
Align-items控制单个伸缩元素行的交叉轴。
(试想一下,如果一个段落中包含一些普通文本和一些高难度的文本,比如数学公式,每一行是如何对齐的。在这种情况下,它将是底部,顶部,或中心的每一种类型的文本在一行将对齐?)
我从每个回答和访问博客中学到的是
横轴和主轴是什么
主轴为水平行,横轴为垂直列-为弯曲方向:行 主轴为垂直列,横轴为水平行-为弯曲方向:列
现在是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-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将它们捆绑在一起,就像它们是一个元素一样。
(如果弯曲方向为列)