css – align-content和align-items之间有什么区别?

前端之家收集整理的这篇文章主要介绍了css – align-content和align-items之间有什么区别?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
任何人都可以告诉我align-items和align-content之间的区别?我很困惑。感谢一堆!

解决方法

flex-Box的align-items属性将flex容器内的项沿着横轴对齐,就像justify-content沿着主轴。 (对于默认flex-direction:row,横轴对应于垂直,主轴对应于horizo​​ntal。对于flex-direction:column,它们分别互换。

这里有一个例子如何align-items:中心外观:

但是align-content是用于多行的灵活框。当项目在单行中时,它不起作用。它根据其值来对齐整个结构。这里是align-content的一个例子:space-around ;:

这里是如何align-content:space-around; with align-items:center looks:

注意第三个框和第一行中的所有其他框更改为垂直居中在该行。

这里有一些codepen链接

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Here’s一个超酷的笔,显示,让你玩的几乎一切在flexBox

猜你在找的CSS相关文章