flex-box的align-items
属性将flex容器中的项目沿着横轴对齐,就像justify-content
沿着主轴对齐一样。(对于默认的flex-direction:row
,交叉轴对应于垂直轴,主轴对应于水平轴。对于flex-direction:column
,这两个轴分别互换)。
下面是align-items:center
的外观示例:
注意,第3个方框和第一行中的所有其他方框都改为在该行中垂直居中。
这里有一些代码本链接可以玩:
http://codepen.io/asim-coder/pen/mkqwbb
http://codepen.io/asim-coder/pen/wrmnwr
这里有一个超级酷的笔,它显示和让你玩几乎所有的Flexbox。