align-items和align-content之间的区别是什么?
当前回答
关键属性是弹性包装。当nowrap(或当十字轴上没有多余的空间)时,align-content没有作用。当换行或反向换行时,如果十字轴中有额外的空间,它总是会产生影响(不管行数如何)。
比较以下四个方框:
其他回答
flex-box的align-items属性将伸缩容器内的项目沿交叉轴对齐,就像justify-content沿主轴对齐一样。(对于默认的flex-direction: row,交叉轴对应于垂直,主轴对应于水平。对于flex-direction:列,这两个分别交换)。
下面是align-items:center的示例:
但align-content适用于多线柔性盒子。当项目在一行中时,它不起作用。它根据值调整整个结构。下面是一个align-content的例子:
这是align-content: space-around;使用align-items:center looks:
请注意,第一行中的第三个方框和所有其他方框都在该行中垂直居中。
下面是一些代码依赖的链接:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
这是一支超级酷的笔,它可以显示并让你在flexbox中玩几乎所有的东西。
在阅读了一些答案后,他们正确地识别出,如果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可以更改行方向的行高或列的宽度(当它的值为拉伸时),或者在行之间或行周围添加空格(空格之间、空格周围、flex-start和flex-end值)。
对齐-项目可以更改项目的高度或线区域内的位置。当项目没有被换行时,它们只有一行,它的区域总是被拉伸到flex-box区域(即使项目溢出),align-content对单行没有影响。因此,它对没有被换行的项目没有影响,而只对对齐项目有影响——当所有项目都在一条线上时,项目可以改变项目的位置或拉伸它们。
但是,如果它们被自动换行,则每行内有多行和项目。如果每一行的所有项都具有相同的高度(对于行方向),那么该行的高度将等于这些项的高度,并且更改align-items值不会看到任何影响。
因此,如果你想通过align-items来影响项目,当你的项目被包装并且具有相同的高度(对于行方向)时,首先你必须使用align-content with stretch value来扩展线条区域。
我从每个回答和访问博客中学到的是
横轴和主轴是什么
主轴为水平行,横轴为垂直列-为弯曲方向:行 主轴为垂直列,横轴为水平行-为弯曲方向:列
现在是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
主要的区别是元素的高度不一样! 然后你可以看到在一行中,它们都是中心\结束\开始