弹性盒(Flexbox)
编辑教程弹性盒Flexbox
弹性盒(Flexbox)是Bootstrap4最新支持的特性,Bootstrap 4 通过 flex 类来控制页面的布局。
在Bootstrap4中,只需用少量变量或者交换一下样式表就可以使用这个崭新的CSS布局样式。
它包含了什么?
在一系列Bootstrap4的组件中,弹性盒支持都是可用的。
- 整个网格系统(混合和预定义的类),float变换成display: flex;。
- 输入框组,由display: table;变成display: flex; 。
- 媒体组件display: table;和一系列hacky样式变换到简单的display: flex;。
通过Grunt,我们编译的 CSS 里面通过 Autoprefixer 提供第三方前缀。
为什么要用弹性盒
一言蔽之,flexbox在CSS中提供了更加简单、灵活多变的布局选项,更具体一点,它提供了下面这些:
- 在父元素里面内容的简单的垂直对齐。
- 通过使用媒体查询,可以简单的根据设备和屏幕分辨率来对内容重新排序。
- 只用 CSS 在网格系统中实现等高列的布局。
所有这些东西不用弹性盒也能够实现,但是通常需要使用额外的hacks以及变通来实现它。
工作机制
如果你对在Sass中修改变量很熟悉,或者对其它CSS预处理器很熟悉,那么你将能够自如地迁移到弹性盒模型。
- 打开 _variables.scss 这个文件,找到 $enable-flex 这个变量。
- 把值由 false 改为 true。
- 重新编译,搞定了!
此外,如果你不需要Sass的源代码文件,默认的Bootstrap编译的CSS你可以替换掉编译的弹性盒变量。
浏览器支持
启用弹性盒意味着减少了支持的浏览器和设备:
- Internet Explorer 9 及其以下不支持弹性盒。
- Internet Explorer 10 有一些已知的问题,需要使用 prefix,这只支持老的 2012 版本语法。
当你在你的项目中启用弹性盒的时候请务必注意你的用户群体。
Mos固件,小电视必刷固件
ES6 教程
Vue.js 教程
JSON 教程
jQuery 教程
HTML 教程
HTML 5 教程
CSS 教程
CSS3 教程
JavaScript 教程
DHTML 教程
JSON在线格式化工具
JS在线运行
JSON解析格式化
jsfiddle中国国内版本
JS代码在线运行
PHP代码在线运行
Java代码在线运行
C语言代码在线运行
C++代码在线运行
Python代码在线运行
Go语言代码在线运行
C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。
大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
选择支付方式:
立即支付
¥
9.99
无法付款,请点击这里
金额: 0 元
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟