flex 弹性盒子布局介绍
flex 布局可以说是目前为止最好用的布局方式，但是目前还稍微有一点受到兼容性的影响，它对 IE9 不兼容，但是在未来随着 IE9 逐渐被淘汰，我相信，它一定会在布局这块大放异彩，因为它实现了太多我们曾经不能实现的布局效果，而且只要简单的几个属性就可以搞定！
1. 官方解释
一种弹性盒模型布局方式。
2. 慕课解释
flex 布局也叫弹性布局，它的特点是可以实现子元素的自适应屏幕大小，可以自由的分配每个 box 需要占用的空间比例。我们把父元素称作为：容器。子元素称作为：项目。容器默认存在两个轴：水平主轴（mian axis）、垂直交叉轴（cross axis）。左侧是主轴的开始点，右侧是主轴的结束点，垂直方向上顶部是交叉轴的开始位置，底部是交叉轴的结束位置。
3. 语法
通过下面两种形式都可以实现弹性盒模型“容器”的初始化。
-
块级弹性模块。
div{
display:flex;
}
-
内联弹性模块。
div{
display:inline-flex;
}
容器包含属性 点击查看详细
| 参数名称 | 参数 | 解释 |
|---|---|---|
| flex-direction | row | row-reverse |
| flex-wrap | nowrap | wrap |
| flex-flow | < flex-direction > | < flex-wrap > |
| justify-content | flex-start | flex-end |
| align-items | flex-start | flex-end |
| align-content | flex-start | flex-end |
项目包含属性 点击查看详细
| 参数名称 | 参数 | 解释 |
|---|---|---|
| flex-grow | number | |
| flex-shrink | number | |
| flex-basis | 像素 | |
| flex | ||
| order | number | |
| align-self | auto | flex-start |
4. 兼容性
| IE | Edge | Firefox | Chrome | Safari | Opera | ios | android |
|---|---|---|---|---|---|---|---|
| 10+ | 12+ | 28+ | 4+ | 6.1+ | 12.1+ | 7+ | 4.4 |
5. 实例
-
创建一个弹性盒模型，容器为块级，项目自适应。
.demo{
display:flex
}
-
创建一个行内盒模型。
.demo{
display:inline-flex
}
6. 小结
-
需要父元素首先设置成
dislpay:flex这样子元素才能起作用，而子元素的float、clear、vertical-align属性都失去作用。 -
子元素可以使用
position来脱离 flex 布局。
微信公众号
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/18909.html
