align-items和align-content之间的区别是什么?
当前回答
我已经在浏览器上检查过了。
Align-content可以更改行方向的行高或列的宽度(当它的值为拉伸时),或者在行之间或行周围添加空格(空格之间、空格周围、flex-start和flex-end值)。
对齐-项目可以更改项目的高度或线区域内的位置。当项目没有被换行时,它们只有一行,它的区域总是被拉伸到flex-box区域(即使项目溢出),align-content对单行没有影响。因此,它对没有被换行的项目没有影响,而只对对齐项目有影响——当所有项目都在一条线上时,项目可以改变项目的位置或拉伸它们。
但是,如果它们被自动换行,则每行内有多行和项目。如果每一行的所有项都具有相同的高度(对于行方向),那么该行的高度将等于这些项的高度,并且更改align-items值不会看到任何影响。
因此,如果你想通过align-items来影响项目,当你的项目被包装并且具有相同的高度(对于行方向)时,首先你必须使用align-content with stretch value来扩展线条区域。
其他回答
我已经在浏览器上检查过了。
Align-content可以更改行方向的行高或列的宽度(当它的值为拉伸时),或者在行之间或行周围添加空格(空格之间、空格周围、flex-start和flex-end值)。
对齐-项目可以更改项目的高度或线区域内的位置。当项目没有被换行时,它们只有一行,它的区域总是被拉伸到flex-box区域(即使项目溢出),align-content对单行没有影响。因此,它对没有被换行的项目没有影响,而只对对齐项目有影响——当所有项目都在一条线上时,项目可以改变项目的位置或拉伸它们。
但是,如果它们被自动换行,则每行内有多行和项目。如果每一行的所有项都具有相同的高度(对于行方向),那么该行的高度将等于这些项的高度,并且更改align-items值不会看到任何影响。
因此,如果你想通过align-items来影响项目,当你的项目被包装并且具有相同的高度(对于行方向)时,首先你必须使用align-content with stretch value来扩展线条区域。
Align-items将子元素垂直分布,子元素之间有空格。
Align-content将它们捆绑在一起,就像它们是一个元素一样。
(如果弯曲方向为列)
首先,align-items用于单行中的项目。因此,对于主轴上的单行元素,align-items会将这些元素各自对齐,并从下一行的新视角开始。
现在,align-content不会干扰一行中的项,而是会干扰行本身。因此,align-content将尝试根据彼此和flex容器对齐行。
检查这个小提琴:https://jsfiddle.net/htym5zkn/8/
来自flexboxfroggy.com的例子:
这将花费你10-20分钟,在21级你会找到你的问题的答案。
Align-content决定行与行之间的间距 Align-items决定在容器中如何将项目作为一个整体进行对齐。 当只有一行时,align-content没有作用
根据我在这里的理解:
当您使用align-item或justify-item时,您正在分别沿列轴或行轴调整网格项中的内容。
但是: 如果使用align-content或justify-content,则是沿着列轴或行轴设置网格的位置。当你在一个更大的容器中有一个网格,宽度或高度是固定的(使用px)时,就会发生这种情况。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 右对齐文本在android TextView
- 相对定位一个元素,而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上,我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
- 我怎么能检查html元素,从DOM消失失去焦点?