flexbox

by basecss

HTML

<div id="feed">
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
    <div class="card">
        <p><a href="http://www.basecss.net/">http://www.basecss.net/</a></p>
        <p>前端爱好者</p>
    </div>
</div>

CSS

#feed{
  -webkit-box-orient:vertical;
  -webkit-box-flex:1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.card{
    border:1px solid gainsboro;
    background-color:white;
    font:10px Tahoma;
    margin:8px;
    padding:15px;
}