flexbox布局使用总结

前阵子我突然在技术群里看到有人提起flex布局。以前没听说过，只能怪我平常没有好好学习。找了度娘才知道原来早就出来了。这次做的页面主要是显示在移动端的，所以我尝试用了flexbox布局。

1、页面分析：

主要分为两部分，图片与文字的混排，左右两栏，自适应。

页面html的主要代码如下：

<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">了解详情 &gt;</a>
        <a href="/goods/index/goods_id/293#order"  class="buy">立即购买 &gt;</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为例：

ok,完成了。