- Bootstrap从入门到项目实战
- 李爱玲
- 133字
- 2021-03-24 20:36:51
4.4 项目对齐
使用align-items-*通用样式可以在Flexbox容器上实现Flex项目的对齐(以y轴开始,如果选择flex-direction: column,则从x轴开始),可选值有:start、end、center、baseline和stretch(浏览器默认值)。
【例4.5】项目对齐案例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P60_2054.jpg?sign=1738940611-oYMvaxPM9VszJNPJhh9BqXwvk4UtdOW1-0-45c4ca90317f7652bbe1167c44a9a1e4)
在IE 11浏览器中运行结果如图4-5所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P61_2071.jpg?sign=1738940611-zH9S4f8gB85yOhEwYPbR6BZsj1AzH4ey-0-be5d2b31c9629fcbe9f20033d5937fb7)
图4-5 项目对齐效果
项目对齐布局也可以添加响应式的设置,响应式类如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P61_2075.jpg?sign=1738940611-qAFzfZLxw2gT35U87nhOmS0GjuFLNZDe-0-a73b639ca78f9a43c682767fcc3f06aa)