Flexbox的：

之間鑑於這種SCSS/CSS的空間的最小值：Flexbox的：

div.container { 
    display:flex; 
    flex-flow: row wrap; 
    justify-content:space-between; 
    border: 1px solid blue; 
    div { 
    width: 200px; 
    border: 1px solid gray; 
    display:inline-block; 
    text-align: center; 
    } 
}

這種佈局有左對齊每一行的第一個項目，右對齊的最後一個項目，按要求。 Here is a codepen illustrating。

隨着瀏覽器窗口變得更窄，分佈式的div元素將靠近在一起，直到它們觸摸，此時它們被重新排列在另一行上。同樣，每行的第一個div對齊左側，最後一個右對齊，間隔爲空。

是否有任何方法設置最小間距的，以便內部的div元素總是在它們之間有空隙。

填充和利潤率可能會無法正常工作，作爲取向

<-- 1st left in row和last right in row -->將不會舉行。

來源

2015-10-07 Jim

您可以添加另一個div與柔性風格，以保持內部div之間所需的差距。（如W3Schools.com中提到的）：

flex：flex-grow flex-shrink flex-basis | auto | initial | inherit;

其中柔性收縮是：

彈性收縮：一個數字，指定該項目將有多少縮水相對靈活的其餘項目

如此，比如你設置這個CSS代碼的差距div：

flex: 1 0 10px;

告訴gap div將有10px寬度，並將增長relat其餘的柔性物品，但不會收縮。所以在屏幕的最窄寬度處最小寬度將爲10px。

來源

2015-10-07 06:54:36 PiML

我不認爲我想要做什麼是可能的。我嘗試了你的[建議]（http://codepen.io/jimmymain/pen/QjvZoN），但是當瀏覽器窗口很窄時，這會導致右側出現間隔div，並且每行中最後一項的對齊方式是不再在右邊。 – Jim

如果你想在左邊有第一個div，在右邊有最後一個div，你必須通過將你的flex寬度設置爲百分比值，並且使用flex-flow：row nowrap來保持所有元素在一行中。 – PiML

我打算接受這個答案，因爲解釋很有幫助。我不認爲我實際上可以得到我想要的，所以我將把我的數據分成多個行，每行都有自己的Flexbox。它會很好。 – Jim

嘗試在css下面。希望這可以幫助。

div.container { 
    position:absolute; 
    border: 1px solid blue; 
    div { 
    width: 200px; 
    margin:0px; 
    border: 1px solid gray; 
    display: inline-block; 
    text-align: center; 
    } 
}

來源

2015-10-07 06:24:25 Ranjana

比賽晚了，但我遇到了同樣的問題。我解決這個問題的方式可能不適用於所有人，但這裏是爲了那些可以使用它的人。

基本思想是你有一個最小差距x。您將每個項目的左右邊距設置爲x/2，以便項目之間的距離爲x（邊距+邊距）。然後將所有物品包裝在容器中，左右邊距爲-x/2。這會隱藏每行邊緣項目的邊距。

這裏是一個工作示例：

.box { 
 
    border: 1px solid black; 
 
    overflow-x: hidden; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    margin: 0 -1em; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    border: 1px solid grey; 
 
    padding: 1em; 
 
    width: 20%; 
 
    margin: 0 1em; 
 
}

<div class="box"> 
 
    <div class="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    </div> 
 
</div>

上 .box

的overflow-x: hidden;是防止水平滾動條，在由於保證金四溢的一些瀏覽器中顯示出來。

如果您希望間隙始終保持一致，並且對於只有一個項目的行將該項目跨越整行，則可以將flex-grow: 1添加到.item。

來源

2018-01-25 19:31:03 bygrace

回答

相關問題