- Bootstrap从入门到项目实战
- 李爱玲
- 146字
- 2021-03-24 20:36:52
4.5 自动对齐
使用align-self-*通用样式,可以使Flexbox上的项目单独改变在横轴上的对齐方式(y轴开始,如果是flex-direction: column,则为x轴开始),其拥有与align-items相同的可选子项:start、end、center、baseline和stretch(浏览器默认值)。
【例4.6】自动对齐案例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P61_2079.jpg?sign=1739180986-V2S2S93hGXSltospPmUT32XcV54O07oS-0-e37ec0444803ea4722a53149c2beebeb)
在IE 11浏览器中运行结果如图4-6所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P62_2090.jpg?sign=1739180986-3rjAueH7StZpRaujXXRQhxA7sIRh91hk-0-47b61bff7231cbb2cee17d4cf91c0b93)
图4-6 自动对齐效果
自动对齐布局也可以添加响应式的设置,响应式类如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P62_2094.jpg?sign=1739180986-MOm7D96v0LPlt5F4qZhAMn8CnqYBvRLe-0-b975f051e5296d86322186d828a2c516)