CSS Flexbox光柵

-2

如何創建一個flexbox光柵，它在元素之間具有相等的垂直和水平空間，而元素則填充每個50％的寬度？CSS Flexbox光柵

項目之間的空間應該最好是固定的大小（例如3px），但我可以生活在一個相對大小（即1％）。

高度應該靈活/流暢，即適用於任何數量的方塊/物品。

注意

CSS列不能使用，因爲流量應該去從左至右爲每一行（而不是向下）
CSS電網將是很好的，但也不能使用，因爲我需要這個移動設備上（這是目前不支持）
所以不要否決這個問題，謝謝

首選結果：

什麼我到目前爲止是這樣的，但橫向空間是不一樣的垂直的。

目前的做法（不是真的satifying）

.-webcams { 
    display: flex; 
    flex-direction:row; 
    flex-wrap:wrap; 
    justify-content: space-between; 


} 
.-webcams a { 
    display: block; 
    flex-basis: 49.5%; 
    margin-bottom: .75vw; 
    }

來源

2017-03-17 Simon Ferndriger

你到底爲什麼有人給了這個問題一個'-1'？這種佈局是Instagram等應用中極受歡迎的用例，然而，這種解決方案不能從flexbox開箱即用！ - 如果這個問題不會被表決，我會刪除它！ –

CSS列，CSS網格和CSS表具有_gap_類似的屬性，而flexbox不具有。某些人投票的原因可能很多，但由於你已經有一段時間了，你應該知道發佈一個最小工作代碼片段，不僅是CSS，這可能是原因。該圖像很好顯示想要的最終結果，如果添加標記，我們可以_see_並建議最合適的解決方案 – LGSon

謝謝，CSS Grid會很好，但不適用於手機 –

您可以使用計算的：

.outer { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 1px solid #000000; 
 
} 
 

 
.inner { 
 
    width: calc(50% - 2px); /* the 2px is the amount of gap divided by 2 */ 
 
    height: calc(50% - 2px); 
 
    background: green 
 
} 
 

 
.outer div:nth-child(2n) ~ .inner { 
 
    margin-top: 4px; /* the 4px is the amount of gap */ 
 
}

<div class="outer"> 
 
    <div class="inner">1</div> 
 
    <div class="inner">2</div> 
 
    <div class="inner">3</div> 
 
    <div class="inner">4</div> 
 
</div>

來源

2017-03-17 11:01:10 Pete

我已爲此+1了，但可稍微改進以使其具有動態高度，因此您可能擁有超過4個方格。我還添加了一些預處理能力，使其更具動態性：https：//jsfiddle.net/LzmdzzLp/。希望有幫助:) –

高度不固定在最終結果，所以謝謝@JamieBarker！你可以發佈它作爲答案，所以我可以相應地標記它？ –

@SimonFerndriger填充的東西似乎有點破解 - 當你的內容對於盒子太大時會發生什麼？ https://jsfiddle.net/LzmdzzLp/1/ – Pete

發佈這是一個解決方案，因爲有人問我通過在OP因爲它理應修復他們的問題，但它是從什麼皮特發佈不是一個百萬英里遠，它實際上是基於他的答案......

.outer { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    width: 400px; 
 
    background: red; 
 
} 
 

 
.inner { 
 
    width: calc(50% - 2px); 
 
    height: 0; 
 
    padding-bottom: calc(50% - 2px); 
 
    background: green; 
 
} 
 

 
.outer div:nth-child(2n)~.inner { 
 
    margin-top: 4px; 
 
}

<div class="outer"> 
 
    <div class="inner">1</div> 
 
    <div class="inner">2</div> 
 
    <div class="inner">3</div> 
 
    <div class="inner">4</div> 
 
    <div class="inner">5</div> 
 
</div>

來源

2017-03-17 16:47:21

回答

相關問題