弹性布局---卡片组件小总结：

思路：flex布局 1为整体，4等分25%，2等分50%

之前一直想怎么实现比较方便，发现网上没有查到比较好的左右靠边，中间等距离的项目，所以干脆自己整理下。

1.考虑定义图片的长和宽，通过justify-content 定义主轴的方式,space-between,发现数据有问题比较好的实现方式，先flex为1的等比分，不定义宽度，定义每个等比板块通过padding 往左右向里面设置span距离，父元素左右两边通过margin为-0.5span距离。 2。实现鼠标滑过图片上面展示文字等样式：

a）:hover在鼠标移到链接上时添加的特殊样式。
b）通过z-index来定义，如果鼠标滑到z-index大于图片，其他低于图片。 3.图片定义行距，底部不能为0；这个x是每行多少个数据。

    <div class="box">
         <div class="box1" ></div>
         <div class="box1" ></div>
         <div class="box1" ></div>
         <div class="box1" ></div>
         <div class="box1" ></div>
         <div class="box1" ></div>
         <div class="box1" ></div>
       
    </div>
</body>
</html>
<style>
    .box{
        justify-content: space-between;
        flex-wrap:wrap;
        display: flex;
        border: 1px solid #ccc;
        width:500px;
         height: 500px;
    }
    .box1{
        margin-bottom: 20px;
        border: 1px solid #ccc;
       /* margin-top: 20px; */
        width:200px;
         height: 150px;
         background-color: aqua;
    }
    .box1:nth-last-of-type(-n+x){
        margin-bottom: 0;
    }
</style>