收縮父元素以消除包裝行級別的子元素後留下的空白

我有一個居中的框，其中包含一些要並排顯示的元素，可能會包裝到多行上。在調整大小時，我希望盒子縮小。元素應保持相同的大小，根據需要包裝到其他行中。收縮父元素以消除包裝行級別的子元素後留下的空白

我可以想到一些處理此問題的方法（例如，將子項設置爲display: inline-block或float: left，或將父項設置爲display: flex; flex-flow: row wrap;）。

在每種情況下，調整大小都會導致元素換行。但是，這會在行的最後一個元素和父項的邊緣之間留下間隙。在大多數情況下，這種行爲是完全合理的，但是在這裏，它將視覺元素視覺地偏離中心。

我很喜歡它，如果我可以應用一些CSS魔法讓父框「縮小」到子元素實際佔用的寬度，而忽略行尾空間。我希望display: table會來我這裏救援，但沒有這樣的運氣。

我認識到解決方法是使用彈性框，指定justify-content: space-between（或沒有彈性框，只是text-align: justify）。這可以通過在元素之間分配未使用的空間來消除間隙 - 但我並不想在項目之間留出空間。

下面是一些圖片描繪了問題：before resize/after resize

的片段見下文（我相信你需要運行它整版把它響應調整）。

body { 
 
    padding: 50px; 
 
    background: pink; 
 
} 
 

 
.outer { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    background: yellow; 
 
} 
 

 
.item { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.a { 
 
    background: green; 
 
} 
 

 
.b { 
 
    background: blue; 
 
}

<body> 
 
    <div class="outer"> 
 
    <div class="item a"></div> 
 
    <div class="item b"></div> 
 
    <div class="item a"></div> 
 
    <div class="item b"></div> 
 
    <div class="item a"></div> 
 
    <div class="item b"></div> 
 
    </div> 
 
</body>

來源

2017-02-13 jptacek

可能的重複：[使容器縮小到適合子元素，因爲他們換行]（http://stackoverflow.com/q/37406353/3597276） –

可能的重複：[如何居中flex容器，但左對齊flex items]（http://stackoverflow.com/q/32802202/3597276） –

謝謝@Michael_B，我會檢查這些。不知道我怎麼沒有找到這些更早！ – jptacek

我做了些研究，採用Michael_D的意見爲出發點。

結論是，使用純CSS很難獲得容器以這種方式收縮。

從another post：

的瀏覽器呈現的初始級聯的容器。它不會當孩子包裝時重排文件。

當容器內容具有單個已知寬度時，最直接的解決方法可能是使用媒體查詢來設置容器寬度。斷點將在基本內容寬度的倍數上發生，直到最大列數。這描述並證明了here。

來源

2017-02-13 22:46:01 jptacek

收縮父元素以消除包裝行級別的子元素後留下的空白

回答

相關問題