Flexbox拼貼網格佈局

有沒有可能使這個佈局與純CSS沒有flexbox屬性？我嘗試爲VC滑塊創建照片庫拼貼。這裏可以使用網格屬性嗎？我使用嵌套Flexbox，最佳做法是什麼？ flexbox gallery collage Flexbox拼貼網格佈局

<div class="contaner"> 
<div class="item"> 
<img src="http://www.telegraph.co.uk/content/dam/pets/2016/05/31/66900964_AR6KDA-CAT-BIRD-PETS-large_trans++XgrBd0P19THPvf9738yRPd-JR69WJ8Rdth_SfFJ_dbY.jpg" alt="" /> 
</div> 
    <div class="item item-flex"> 
<img class="item-flex-img-big" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /> 
<img class="item-flex-img" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /> 
</div> 
<div class="item item-flex"> 
    <img class="item-flex-img" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /> 
    <img class="item-flex-img-big" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /> 

    </div>

<style> 
img { 
width: 100%; 
max-width: 100%; 
object-fit: cover; 
object-position:50% 50%; 
height: 100%; 
} 

.contaner { 
    display: flex; 
.item { 
flex: 1 1 100%; 
} 
.item + .item { 
    padding-left: 10px; 
} 
.item-flex { 
display: flex; 
flex-direction: column; 
} 
.item-flex { 
img + img { 
    margin-top:10px; 
} 
} 
.item-flex-img{ 
height: 40%; 

} 
.item-flex-img-big{ 
    height: 60%; 

} 
} 
</style>

來源

2016-11-04 Palaniichuk Dmytro

你可以看看列CSS。

.contaner { 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-rule-width: 5px; 
 
    -moz-column-rule-width: 5px; 
 
    column-rule-width: 5px; 
 
    height: 600px; 
 
    width: 1200px; 
 
    padding: 15px 15px 0; 
 
    overflow: hidden; 
 
} 
 
span { 
 
    display: block; 
 
    overflow: hidden; 
 
    height: calc(40% - 15px); 
 
    min-width: 100%; 
 
    margin: 0 0 15px; 
 
} 
 
span:nth-child(1) { 
 
    height: calc(100% - 15px); 
 
} 
 
span img { 
 
width: 100%; 
 
object-fit: cover; 
 
object-position:50% 50%; 
 
height: 100%; 
 
} 
 
span:nth-child(2), 
 
span:nth-child(5) { 
 
    height: calc(60% - 15px); 
 
} 
 
span:nth-child(1) img { 
 
    height: 100%; 
 
    margin: 0; 
 
    object-position:10% 50%; 
 
} 
 
/* snippet purpose */ 
 

 
body { 
 
    margin: 0; 
 
} 
 
.contaner { 
 
    box-sizing: border-box; 
 
    height: 100vh; 
 
    width: 200vh; 
 
}

<div class="contaner"> 
 
    <span><img src="http://www.telegraph.co.uk/content/dam/pets/2016/05/31/66900964_AR6KDA-CAT-BIRD-PETS-large_trans++XgrBd0P19THPvf9738yRPd-JR69WJ8Rdth_SfFJ_dbY.jpg" alt="" /></span> 
 
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span> 
 
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span> 
 
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span> 
 
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span> 
 

 
</div>

通知：每個圖像被包裝在一個單跨所有sibblings（可以是數字或任何其他標籤）

來源

2016-11-04 22:01:41

Flexbox拼貼網格佈局

回答

相關問題