标签：
前阵子我突然在技术群里看到有人提起flex布局。以前没听说过，只能怪我平常没有好好学习。找了度娘才知道原来早就出来了。这次做的页面主要是显示在移动端的，所以我尝试用了flexbox布局。
1、页面分析：
主要分为两部分，图片与文字的混排，左右两栏，自适应。
页面的主要代码如下：
<div class="content-inner"> <div class="content-flow"> <p class="name">清本源五谷亮白肌底液</p> <img class="stars" src="/public/images/act/20150730/stars.jpg" alt=""> <hr /> <p class="intro">打开肌肤吸收通道 1滴补足全天水能量</p> <hr /> <p class="old_price">原价：¥<del>228</del></p> <p class="new_price">优惠价：¥<span>228</span></p> <a href="/goods/index/goods_id/293" class="details">了解详情 ></a> <a href="/goods/index/goods_id/293#order" class="buy">立即购买 ></a> </div> <div class="img_show"> <img class="lazy" src="/public/images/act/20150730/img1_2.jpg" alt=""> </div> </div>
css：
.content-inner{ display:flex; display: -webkit-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: #fff; flex-flow:row nowrap; -webkit-flex-flow: row nowrap; } .content-flow{width:50%;} .img_show{width:45%;}
其实很简单的几行css代码就可以搞定了。
首先需要在伸缩子元素的父容器加上display:flex;属性。
flex-flow:row nowrap;属性是设置伸缩子元素的延伸方向是水平（行），nowrap是不换行，也就是说不管窗口如何变化，子容器都是以两栏并排的样子存在着。
因为我需要自容器内容上下左右居中显示，所以我设置了它的侧轴对齐方式和主轴对齐方式均为center。
align-items: center;/*侧轴对齐方式（我觉得应该就是垂直方向上的对齐）*/ justify-content: center;/*主轴对齐方式（我觉得应该就是水平方向上的对齐）*/
好了，就是这样子，两栏自适应布局就成功。真的很方便，也很简单。
下面是显示效果：
以窗口宽度640px为例：
以窗口宽度320px为例：
欧耶！！！
标签：
原文地址：http://www.cnblogs.com/U-can/p/4688902.html
