flexbox简介_html/css_WEB-ITnose
浮动在移动布局中不再重要,flex盒模型越来越重要。
flexbox经历过三个版本,主要区别是2009年到2012年之间的语法变化。最新的语法和现在规范是同步的(例display:flex和“flex-{*}”属性)。在这之间的语法是2011年出现的非官方语法,只能被IE识别(例display:flexbox;display: -ms-flexbox)。最老的语法产生于2009年(例display: box;或者“box-{*}”属性)
flexbox是css3新增盒子模型,可以实现复杂的布局。flexbox没有得到firefox,Opera,chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz),opera(-o),chrome/safari(-webkit)。
flexbox经典的布局应用是垂直等高,水平均分,按比例划分。
二、flexbox常用属性1、用于父元素的样式
2、用于子元素的样式
1、子元素水平排列,按比例分割父元素宽度
.parent宽度500px,其子元素水平排列,child-one占1/6,child-two占2/6,child-three占了3/6。
123
2、子元素水平排列,一个子元素定宽,剩余子元素按比例分割
123
3、子元素垂直排列,分割父元素高度
.parent中的子元素垂直排列,所以每个子元素宽度占100%。
123
4、子元素水平排列,定高垂直方向居中对齐
父元素中子元素水平排列,子元素定高时设置垂直方向对齐方式为居中对齐。
四、经典布局123
flexbox经典的布局应用是垂直等高,水平均分,按比例划分,水平垂直居中,还可以实现移动端的弹窗。
1、垂直等高,水平均分,按比例划分
.parent{display: -webkit-box; display: -webkit-flex; display: flex;}.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
完整demo
2、水平居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}
完整demo:
3、垂直居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}
完整demo
4、移动端弹窗
现在移动端很多弹窗组件使用flexbox来实现,直接嵌套div.overlay>div.pop。
主页面的文字五、兼容性
PC端:
提示:旧版本的Firefox(22-27)支持除了flex-wrap和flex-flow之外的新语法。Opera (12.1+ - 17+)使用flex可以没有私有前缀,但是中间的15和16版本需要私有前缀。
移动端:
display:-webkit-box
A Complete Guide to Flexbox
探索Flexbox
时下Web App中的Flexbox应用
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:有问题欢迎与我讨论,共同进步。
推荐阅读
-
flexbox简介_html/css_WEB-ITnose
-
HTML最佳实践_html/css_WEB-ITnose
-
getElementById 不能获得对象。。找不出原因_html/css_WEB-ITnose
-
CSS3 动画效果合集_html/css_WEB-ITnose
-
asp.net 网页设计_html/css_WEB-ITnose
-
html实现多种颜色的选取_html/css_WEB-ITnose
-
搜狗市场高速下载以及网页端调起APP页面研究与实现_html/css_WEB-ITnose
-
前端面试题总结(持续更新)_html/css_WEB-ITnose
-
高手帮我_html/css_WEB-ITnose
-
AngularJS在IE8的支持_html/css_WEB-ITnose