align-content 和 align-items 有什么区别? [英] What's the difference between align-content and align-items?
问题描述
align-items
和 align-content
有什么区别?
推荐答案
flex-box 的 align-items
属性可以像 justify 一样沿横轴对齐 flex 容器内的项目-content
沿着主轴.(对于默认的flex-direction:row
,横轴对应垂直,主轴对应水平.与flex-direction:column
,这两者分别互换).
The align-items
property of flex-box aligns the items inside a flex container along the cross axis just like justify-content
does along the main axis. (For the default flex-direction: row
the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: column
those two are interchanged respectively).
以下是 align-items:center
外观的示例:
Here's an example of how align-items:center
looks:
但是 align-content
是用于多行的弹性盒子.当项目在一行中时它不起作用.它根据其值对齐整个结构.以下是 align-content: space-around;
的示例:
But align-content
is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value. Here's an example for align-content: space-around;
:
这里是 align-content: space-around;
和 align-items:center
的样子:
And here's how align-content: space-around;
with align-items:center
looks:
注意第一行中的第三个框和所有其他框更改为该行的垂直居中.
Note the 3rd box and all other boxes in first line change to vertically centered in that line.
这里有一些代码笔链接可以玩:
Here are some codepen links to play with:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
这是一支超酷的笔,它可以显示并让您玩转 flexbox 中的几乎所有内容.
Here's a super cool pen which shows and lets you play with almost everything in flexbox.
这篇关于align-content 和 align-items 有什么区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!