左對齊flexbox的最後一行，使用空格和margin之間的空格

我在容器中有一個未知數量的元素，需要在外部沒有邊距，但是它們之間的邊距最小。左對齊flexbox的最後一行，使用空格和margin之間的空格

我還需要這些來證明space-between和最後一行左對齊。

我試圖用Flexbox的做到這一點，像這樣：

.outside { 
 
    border: 1px solid black; 
 
} 
 
.container { 
 
    margin: -5px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.container:after { 
 
    content: ''; 
 
    flex: auto; 
 
} 
 
.box { 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
}

<div class="outside"> 
 
    <div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

View JSFiddle

這工作正常，除了最後一排的間距是關閉的，因爲你可以在截圖中看到：

如果我們不知道將會有多少列（使用flexbox或JavaScript以外的其他東西），有什麼方法可以使它工作嗎？

來源

2016-12-02 James Simpson

等待幾年。 Flexbox級別2可能會添加一些功能來解決此問題。 – Oriol

柔性容器中的最後一行對齊可能是當今flexbox中＃1缺失的功能。另一個常見問題是「列換行」的各種缺陷。希望在下一版本的flexbox規範中解決這兩個問題。 –

有沒有辦法做到這一點沒有flexbox，我們可能會忽略？ –

最後一行對齊是flexbox的常見問題。

要考慮的一種方法是在最後一個可見項之後使用不可見的Flex項目。簡而言之，我只是稱他們爲「幻影物品」。

.outside { 
 
    border: 1px solid black; 
 
} 
 
.container { 
 
    margin: -5px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.container:after { 
 
    content: ''; 
 
    flex: auto; 
 
} 
 
.box { 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
} 
 

 
.hidden { 
 
    visibility: hidden; 
 
    margin: 0 5px; 
 
    height: 0; 
 
}

<div class="outside"> 
 
    <div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    </div> 
 
</div>

來源

2016-12-02 16:21:14

只有當我們知道連續有多少人（我注意到我發佈了錯誤的鏈接，它不應該在小提琴中有500px的寬度，我現在已經更新）時，這纔會起作用。 –

是的，我看到您更新了您的代碼以刪除容器上的寬度。沒有這個限制，你可能需要訴諸JS，因爲我不相信當前的CSS技術可以解決問題。我會留下我的答案，以供一般參考。 –

你並不需要知道連續有多少物品。你只需要知道最多**的項目數量可以在一行中，並設置儘可能多的隱藏框作爲這個最大值 – vals

邁克爾是正確的，問題是你不能做space-between，然後選擇最後一排是flex-start。對我伸出的部分雖然是指定的寬度。這很重要嗎？

如果不是，通常的做法是使用媒體查詢來控制每行顯示的項目數。您可以設置很多媒體查詢步驟，以確保項目不會拉得太大，但這樣就與正常柵格排水溝之間的距離更緊密，並使「最後一排問題」消失。認爲這會工作？

例子：http://codepen.io/anon/pen/JbpPKa

來源

2016-12-02 16:55:33

寬度不應該在那裏，並且不在問題的代碼中。造成這種困難的原因是它必須具有響應能力，而且我們不知道容器有多寬，因此不知道每行有多少個元素。 –

-1

堆棧溢出不會允許我Michael_B的回答發表評論，但我也想說明如何計算幻象元素被追加可以用JavaScript來實現的人誰是試圖數量解決這個問題。

/** 
    * @param {Integer} numElements The number of elements you're displaying. 
    * @param {Number} element Width Width, in pixels, of each element. 
    * @param {Number} margin Width, in pixels. Your minimum target margin between items. 2x the margin on each individual item. 
    * @param {Number} containerWidth Width, in pixels, of the containing element. 
    */ 
    const getNumPhantomElements = ({numElements, elementWidth, margin, containerWidth}) => { 
    const elementsPerRow = Math.floor(containerWidth/(elementWidth + margin)); 
    const elementsInLastRow = numElements % elementsPerRow; 
    const numPhantomElements = elementsPerRow - elementsInLastRow; 

    return numPhantomElements; 
    };

在這種情況下：

const containerWidth = document.querySelector('.container').offsetWidth; 
const numPhantomElements = getNumPhantomElements({ 
    numElements: 21, 
    elementWidth: 50, 
    margin: 10, // 2x 5px margin on each box 
    containerWidth 
}); // Append this many elements (output depends on your viewport size)

來源

2016-12-08 17:22:44

左對齊flexbox的最後一行，使用空格和margin之間的空格

回答

相關問題