利用flex布局超簡單實(shí)現(xiàn)瀑布流排版

<div class="masonary">
            <div class="clumn">
                <div class="item"> 
                    <div class="item__content" style="height: 100px;background: lightblue;">1 </div> 
                    <div class="item__content" style="height: 210px;background: orange;"> 2</div> 
                    <div class="item__content" style="height: 110px;background: lightcoral;">3 </div> 
                    <div class="item__content" style="height: 170px;background: lightgray;"> 4</div> 
                    <div class="item__content" style="height: 100px;background: lightblue;">5 </div> 
                    <div class="item__content" style="height: 180px;background: lightsteelblue;">6 </div> 
                </div>
            </div>
            <div class="clumn">
                <div class="item"> 
                    
                    <div class="item__content" style="height: 100px;background: lightblue;"> 7</div> 
                    <div class="item__content" style="height: 120px;background: lightsteelblue;">8</div> 
                    <div class="item__content" style="height: 60px;background: orange;"> 9</div> 
                    <div class="item__content" style="height: 200px;background: orange;">10 </div> 
                    <div class="item__content" style="height: 100px;background: lightcoral;">11 </div> 
                    <div class="item__content" style="height: 260px;background: lightgray;">12 </div> 
                </div>
            </div>
            <div class="clumn">
                <div class="item"> 
                    <div class="item__content" style="height: 130px;background: lightcyan;">13 </div> 
                    <div class="item__content" style="height: 199px;background: orange;">14 </div> 
                    <div class="item__content" style="height: 160px;background: lightcoral;">15 </div> 
                    <div class="item__content" style="height: 146px;background: orange;">16 </div> 
                    <div class="item__content" style="height: 160px;background: lightcoral;">17 </div> 
                    <div class="item__content" style="height: 111px;background: orange;">18 </div> 
                </div>
            </div>
        </div>

css

.masonary{
                width: 100%;
                max-width: 1000px;
                margin: auto;
                display: flex;
                flex-direction: column;
                height: auto;
            }
            @media only screen and (min-width: 500px) { 
                .masonary { flex-direction: row; } 
            }
            
            .clumn{
                margin-left: 0.5rem;
                display: flex; 
                flex-flow: column wrap; 
                width: 100%;
            }
            @media only screen and (max-width: 500px) { 
                .clumn { width: 100%;max-width: 95%;margin: auto; } 
            }
            
            .clumn>.item>.item__content{
                margin-bottom: 0.5rem;
                color: white;
                text-align: center;
            }

效果圖

image

最后編輯于：2019.07.10 20:53:55

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者