flexbox布局

前阵子我突然在技术群里看到有人提起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">了解详情 &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为例:

欧耶!!!
posted @ 2015-07-30 12:00  U_can  阅读(245)  评论(0编辑  收藏  举报