标题：*
140 字

TAG标签：（用空格隔开）
30 字

恢复历史版本：

HTML转MD HTML转MD2

display:flex 意思是弹性布局<img src="/ueditor/php/upload/image/20170718/1500346094119895.png" alt="" style="border: 0px; max-width: 900px;"/>&nbsp;首先flex的出现是为了解决哪些问题呢？一、页面行排列布局,左右自由伸缩困难<img src="/ueditor/php/upload/image/20170718/1500346096793243.png" alt="" style="border: 0px; max-width: 900px;"/>像此图左右两个div一排显示可以用浮动的布局方式html部分<img src="/ueditor/php/upload/image/20170718/1500346097112509.png" alt="" style="border: 0px; max-width: 900px;"/>css部分<img src="/ueditor/php/upload/image/20170718/1500346099354376.png" alt="" style="border: 0px; max-width: 900px;"/> 这种布局有两个缺点1.需要一个空div来清除浮动。2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面 以上可以这么写，达到了样的效果<pre class="brush:html;toolbar:false">	&lt;style&gt;
	.main{display:flex;}
	.main&nbsp;.left,.main&nbsp;.right{border:1px&nbsp;solid&nbsp;#ccc;height:200px;line-height:200px;text-align:center;}
	.left{flex:1;}
	.right{flex:2;}
	&lt;/style&gt;

&lt;div&nbsp;class=&quot;main&quot;&gt;
		&lt;div&nbsp;class=&quot;left&quot;&gt;区域1&lt;/div&gt;
		&lt;div&nbsp;class=&quot;right&quot;&gt;区域2&lt;/div&gt;
	&lt;/div&gt;</pre> 父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同<img src="http://images2015.cnblogs.com/blog/883655/201607/883655-20160725185603216-426739172.png" alt="" style="border: 0px; max-width: 900px;"/>1:2分时<img src="http://images2015.cnblogs.com/blog/883655/201607/883655-20160725185624997-594518144.png" alt="" style="border: 0px; max-width: 900px;"/>同样分为3份时<img src="http://images2015.cnblogs.com/blog/883655/201607/883655-20160725185908013-711696442.png" alt="" style="border: 0px; max-width: 900px;"/><img src="http://images2015.cnblogs.com/blog/883655/201607/883655-20160725185951934-843104943.png" alt="" style="border: 0px; max-width: 900px;"/>flex是所占的比例，这样的布局就方便很多。&nbsp;&nbsp;二、div上下左右居中我之前写过div上下左右居中的几种方法其中有一个写了margin：auto auto；这个方法的使用前提就是先把父元素设为display:flex<img src="http://images2015.cnblogs.com/blog/883655/201607/883655-20160725191213419-1845535147.png" alt="" style="border: 0px; max-width: 900px;"/>html部分<img src="http://images2015.cnblogs.com/blog/883655/201607/883655-20160725191240075-929458564.png" alt="" style="border: 0px; max-width: 900px;"/>css部分&nbsp;<img src="http://images2015.cnblogs.com/blog/883655/201607/883655-20160725191259903-325213478.png" alt="" style="border: 0px; max-width: 900px;"/>在未知div宽高时，用这种方法比较方便