弹性盒(Flexbox)是Bootstrap4最新支持的特性,Bootstrap 4 通过 flex 类来控制页面的布局。
在Bootstrap4中,只需用少量变量或者交换一下样式表就可以使用这个崭新的CSS布局样式。
在一系列Bootstrap4的组件中,弹性盒支持都是可用的。
通过Grunt,我们编译的 CSS 里面通过 Autoprefixer 提供第三方前缀。
一言蔽之,flexbox在CSS中提供了更加简单、灵活多变的布局选项,更具体一点,它提供了下面这些:
所有这些东西不用弹性盒也能够实现,但是通常需要使用额外的hacks以及变通来实现它。
如果你对在Sass中修改变量很熟悉,或者对其它CSS预处理器很熟悉,那么你将能够自如地迁移到弹性盒模型。
此外,如果你不需要Sass的源代码文件,默认的Bootstrap编译的CSS你可以替换掉编译的弹性盒变量。
启用弹性盒意味着减少了支持的浏览器和设备:
当你在你的项目中启用弹性盒的时候请务必注意你的用户群体。访问 Can I use…来了解更多浏览器对弹性盒的支持细节。