css的应用到排序,css3使用flexbox实现3列瀑布流（masonry）布局（水平方向排序）...

CSS

语言：

CSSSCSS

确定

.masonry {

display: flex;

flex-flow: column wrap;

align-content: space-between;

/* Your container needs a fixed height, and it

* needs to be taller than your tallest column. */

height: 665px;

background-color: #f7f7f7;

border-radius: 3px;

padding: 20px;

width: 60%;

margin: 40px auto;

counter-reset: items;

}

.item {

width: 32%;

position: relative;

margin-bottom: 2%;

border-radius: 3px;

background-color: #a1cbfa;

border: 1px solid #4290e2;

box-shadow: 0 2px 2px rgba(0,90,250,0.05),

0 4px 4px rgba(0,90,250,0.05),

0 8px 8px rgba(0,90,250,0.05),

0 16px 16px rgba(0,90,250,0.05);

color: #fff;

padding: 15px;

box-sizing: border-box;

}

.item::before {

counter-increment: items;

content: counter(items);

}

/* Re-order items into 3 rows */

.item:nth-child(3n+1) { order: 1; }

.item:nth-child(3n+2) { order: 2; }

.item:nth-child(3n) { order: 3; }

/* Force new columns */

.container::before,

.container::after {

content: "";

flex-basis: 100%;

width: 0;

order: 2;

}

body { font-family: sans-serif; }

h3 { text-align: center; }