一、概述
浮动在移动布局中不再重要，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常用属性.parent宽度500px，其子元素水平排列，child-one占1/6，child-two占2/6，child-three占了3/6。
<style> .parent{ width: 500px; height: 200px; display: -webkit-box; -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的，但是为了区分起见，加上该属性 */ } .child-one{ background: lightblue; -webkit-box-flex: 1; } .child-two{ background: lightgray; -webkit-box-flex: 2; } .child-three{ background: lightgreen; -webkit-box-flex: 3; } </style></head><div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中--> <div class="parent"> <div class="child-one">1</div> <div class="child-two">2</div> <div class="child-three">3</div> </div></div>
<style> .parent{ width: 500px; height: 200px; display: -webkit-box; background-color:pink; -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的，但是为了区分起见，加上该属性 */ } .child-one{ background: lightblue; -webkit-box-flex: 1; } .child-two{ background: lightgray; -webkit-box-flex: 2; } .child-three{ background: lightgreen; /*定宽，并加上左右margin,父元素加上粉色背景色更好理解*/ width:150px; margin:0 15px; } </style></head><div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中--> <div class="parent"> <div class="child-one">1</div> <div class="child-two">2</div> <div class="child-three">3</div> </div></div>.parent中的子元素垂直排列，所以每个子元素宽度占100%。
<style> .parent{ width: 400px; height: 600px; display: -webkit-box; background-color:pink; -webkit-box-orient: vertical;/*子元素垂直排列 */ } .child-one{ background: lightblue; -webkit-box-flex: 1; } .child-two{ background: lightgray; -webkit-box-flex: 2; } .child-three{ background: lightgreen; /*定高，有上下margin,父元素加上粉色背景色更好理解*/ height:200px; margin:15px 0; } </style></head><div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中--> <div class="parent"> <div class="child-one">1</div> <div class="child-two">2</div> <div class="child-three">3</div> </div></div>父元素中子元素水平排列，子元素定高时设置垂直方向对齐方式为居中对齐。
<style> .parent{ width: 400px; height: 200px; display: -webkit-box; background-color:pink; -webkit-box-orient: horizontal; /*-webkit-box-align:center;/*父元素中子元素水平排列，定高时设置垂直方向对齐方式为垂直居中*/ } .child-one{ background: lightblue; -webkit-box-flex: 1; height:100px; } .child-two{ background: lightgray; -webkit-box-flex: 2; height:110px; } .child-three{ background: lightgreen; -webkit-box-flex: 2; height:120px; } </style></head><div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中--> <div class="parent"> <div class="child-one">1</div> <div class="child-two">2</div> <div class="child-three">3</div> </div></div>flexbox经典的布局应用是垂直等高，水平均分，按比例划分，水平垂直居中，还可以实现移动端的弹窗。
.parent{display: -webkit-box; display: -webkit-flex; display: flex;}.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}完整demo
<style> .parent{display: -webkit-box; display: -webkit-flex; display: flex; height:100px; width:150px; background-color:pink;} .child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border:1px solid green; }</style><div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div></div>
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}完整demo:
<style> .parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; height:100px; width:150px; background-color:pink;} .child{ width:50px; height:50px; border:1px solid green; }</style><div class="parent"> <div class="child"></div></div>
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}完整demo
<style> .parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; height:100px; width:150px; background-color:pink;} .child{ width:50px; height:50px; border:1px solid green; }</style></head><body><div class="parent"> <div class="child"></div></div>现在移动端很多弹窗组件使用flexbox来实现，直接嵌套div.overlay>div.pop。
<style> .overlay{ /*flex style*/ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center; display:-moz-box; -moz-box-orient:horizontal; -moz-box-pack:center; -moz-box-align:center; display:-o-box; -o-box-orient:horizontal; -o-box-pack:center; -o-box-align:center; display:-ms-box; -ms-box-orient:horizontal; -ms-box-pack:center; -ms-box-align:center; display:box; box-orient:horizontal; box-pack:center; box-align:center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; display: flex; align-items: center; justify-content: center; /*other style*/ width:100%; max-width:750px; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.5); } .popup{ width:90%; max-width:650px; border:1px solid green; padding:20px 4% 4% 4%; box-sizing:border-box; height:auto; background:#fff; border-radius:4px; position:relative; } .popup-close{ width:15px; height:14px; background:url(image/close.png) no-repeat; background-size:100% 100%; position:absolute; top:8px; right:8px; }</style>主页面的文字<div class="overlay"> <div class="popup"> <a href="javascript:;" class="popup-close"></a> 弹层的文字 </div></div>
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,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
