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屋！