align-self - 自己对齐

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

在这个 flex 容器上, 我用了一个 align-items 属性,它的值是 flex-start .. 所以在这个容器里的所有的项目都会靠着容器的最上面开始显示 ..

如果你想单独去控制容器里的某个项目的对齐方式,可以在这个项目的上面使用 align-self 这个属性 .. 比如现在我想让 item 1 这个项目靠着容器的最下面这个边儿 ..

.item-1 .. 用一个 align-self .. 它的值默认是 auto,也可以是 flex-start,flex-end,center , baseline 还有 stretch .. 先把它设置成 flex-end .. 这里 item 1 这个项目会靠下边显示 .. 其它的项目仍然是靠上边显示 ..

再设置一下 item-2 的对齐方式 .. 同样使用一个 align-self .. 把它的值设置成 center .. 让它居中 .. 下面再去拉伸一下 item 3 .. 添加一个 align-self .. 拉伸可以使用 stretch ..

然后让 item 4 这个项目,也居中显示 .. 方法就是把它的 align-self 属性的值设置成 center ..

最后再让这个 item 5 靠下边儿显示 .. 使用 align-self .. 它的值是 flex-end ..

align-self - 自己对齐《 CSS:Flexbox 布局 》

统计

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

社会化网络

关于

微信订阅号

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