align-content - 多行项目的对齐方式

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在一个 flex 容器里,如果项目是在多行显示 .. 使用 align-content 这个属性,我们可以调整这些项目在容器里的垂直方向的对齐方式 ..

这里我设置了一下容器的高度 .. 还有把它的 flex-warp 属性设置成了 wrap ,这样项目会在多行显示 ..

在这个容器里,我们再添加一个 align-content 属性 .. 这个属性的值默认是 stretch .. 就是你现在看到的这种拉伸的对齐方式 .. 这样不同行的项目会被拉伸,占满容器的高度 ..

把它的值再设置成 flex-start .. 现在它们会靠着 cross 轴的起点显示 .. 也就是在容器的顶部开始显示,并且这些项目的高度不会被拉伸 ..

让它们在容器的底部显示的话, 可以用一个 flex-end .. 想让它们居中,可以使用 center 这个作为 align-content 这个属性的值 ..

在不拉伸项目高度的情况下,我们可以利用容器里这些剩下的垂直方向的空间 .. 使用一个 space-between .. 它会在项目的行与行的中间添加间隔 ..

再试一下 space-around ... 这个值会在项目的行的周围去添加间隔,这个间隔的大小取决于容器垂直的方向剩下的空间 ..

align-content - 多行项目的对齐方式《 CSS:Flexbox 布局 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点