CSS3 弹性盒子(Flex Box)

今天看了看微信小程序，对于想做android 和 ios 程序的企业是个不错的选择，成本相对于原生app来说少很多。

想先做个demo看看怎么样，有很长一段时间没有写前端了，有些生疏了。

首页想实现以下图片中的布局，但又不想用老办法，小程序对css3，es6支持都还不错，决定用css3新特性布局。大致看了一下新特性，flex box比较符合我的要求。实现两列图片宽度自适应，图片有固定间距，每一个item 代码都一样，用来循环输出

代码如下

<style>
    .flex {
        margin: 0 auto;
        width: 600px;
        display: flex;
        flex-wrap: wrap;
    }

    .flex-item {
        width: 50%;
        box-sizing: border-box;
        padding: 5px;
        text-align: center
    }

    .flex-item img {
        width: 100%;
        border-radius: 10px;
    }
    .flex-item a{
        display: block;
        text-decoration: none;
        color: black
    }
    .flex-item a div{
        margin: 3px 0;
    }
</style>
<div class="flex">
    <div class="flex-item">
        <a href="">
            <img src="http://iph.href.lu/500x300">
            <div>在这片与世隔绝、危险密布的丛林</div>
        </a>
        <span style="float:left;color:#9e9e9e;font-size:13px">免费</span>
        <span style="float:right;color:#9e9e9e;font-size:13px">2000人浏览</span>
    </div>
   <div class="flex-item">
        <a href="">
            <img src="http://iph.href.lu/500x300">
            <div>在这片与世隔绝、危险密布的丛林</div>
        </a>
        <span style="float:left;color:#9e9e9e;font-size:13px">免费</span>
        <span style="float:right;color:#9e9e9e;font-size:13px">2000人浏览</span>
    </div>
    <div class="flex-item">
        <a href="">
            <img src="http://iph.href.lu/500x300">
            <div>在这片与世隔绝、危险密布的丛林</div>
        </a>
        <span style="float:left;color:#9e9e9e;font-size:13px">免费</span>
        <span style="float:right;color:#9e9e9e;font-size:13px">2000人浏览</span>
    </div>
    <div class="flex-item">
        <a href="">
            <img src="http://iph.href.lu/500x300">
            <div>在这片与世隔绝、危险密布的丛林</div>
        </a>
        <span style="float:left;color:#9e9e9e;font-size:13px">免费</span>
        <span style="float:right;color:#9e9e9e;font-size:13px">2000人浏览</span>
    </div>
    <div class="flex-item">
        <a href="">
            <img src="http://iph.href.lu/500x300">
            <div>在这片与世隔绝、危险密布的丛林</div>
        </a>
        <span style="float:left;color:#9e9e9e;font-size:13px">免费</span>
        <span style="float:right;color:#9e9e9e;font-size:13px">2000人浏览</span>
    </div>
    <div class="flex-item">
        <a href="">
            <img src="http://iph.href.lu/500x300">
            <div>在这片与世隔绝、危险密布的丛林</div>
        </a>
        <span style="float:left;color:#9e9e9e;font-size:13px">免费</span>
        <span style="float:right;color:#9e9e9e;font-size:13px">2000人浏览</span>
    </div>
</div>

 

转载于:https://my.oschina.net/summerdays/blog/1072631