如何對齊多行柔性盒中的最後一行/最後一行

我有一個柔性盒佈局的主要問題。我建立與充滿圖像的盒容器，我決定用Flexbox的佈局來證明的內容，使它看起來像一個網格如何對齊多行柔性盒中的最後一行/最後一行

她是代碼：

<div class="container"> 

    <div class="item"></div> 
    <div class="item"></div> 
    ... 
    <div class="item"></div> 

</div>

和CSS：

.container { 
    display: flex; 
    display: -webkit-flex; 
    display: -moz-flex; 
    justify-content: space-around; 
    -webkit-justify-content: space-around; 
    -moz-justify-content: space-around; 
    flex-flow: row wrap; 
    -webkit-flex-flow: row wrap; 
    -moz-flex-flow: row wrap; 
} 

.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

除了最後一行/行，一切看起來都不錯 - 當它不包含與其他行相同數量的元素時，居中元素和它打破了我的網格效果。

http://jsfiddle.net/puz219/7Hq2E/

如何對齊最後一行/列到左側？

來源

2013-05-04 PuZ

我刪除了Flex標籤，因爲這與Adobe/Apache UI框架無關。 – JeffryHouser 2013-05-04 19:38:56

即使你只能調整最後一行的內容，也不可能因爲空間的原因排列你的元素。你可以做的最好的是使用空間，而不是：http://jsfiddle.net/7Hq2E/1/。另外，標準屬性上沒有moz前綴。它們應該替換爲IE10的屬性：https://gist.github.com/cimmanon/727c9d558b374d27c5b6 – cimmanon 2013-05-04 23:54:16

只需從代碼中刪除justify-content，它就可以工作。您可以使用邊距屬性微調柔性項目之間的空間。 [http://jsfiddle.net/katranci/kkRmW/](http://jsfiddle.net/katranci/kkRmW/） – katranci 2013-05-07 12:22:32

您沒有指定它是否需要100％響應，但類似這種技術的工作。每行

使用一個容器中，用最小寬度限制它，還添加隱藏要素進行計算工作：

HTML

<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 

</div> 
<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 

</div> 
<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item empty"></div> 
    <div class="item empty"></div> 

</div>

CSS

.container { 
    display: flex; 
    display: -webkit-flex; 
    display: -moz-flex; 
    justify-content: space-around; 
    -webkit-justify-content: space-around; 
    -moz-justify-content: space-around; 
    flex-flow: row wrap; 
    -webkit-flex-flow: row wrap; 
    -moz-flex-flow: row wrap; 
    min-width:580px; 
    background:rgba(00,00,00,0.5); 
} 
.container .item { width: 130px; height: 180px; background: #000; margin: 0 1% 24px; } 

.container .item.empty{opacity:0;}

Here is the example。

來源

2014-01-23 19:49:07

你應該使用可見性：隱藏，而不是不透明：0 – 2014-03-25 10:08:44

@EliWhite我沒有使用它的目的。因爲它會打破設計。 – 2014-03-25 22:16:33

你有一個jsfiddle嗎？隱藏和不透明都應占用佈局中的相同空間，但隱藏使顯卡不必做任何工作。 – 2014-03-26 01:58:53

-1

我檢查了它，它在我的HTML編輯器工具更好地工作

腳本應該是這樣

CSS部分

.container {
顯示：柔性;
display：-webkit-flex;
display：-moz-flex;
justify-content：space-around;
-webkit-justify-content：space-around;
-moz-justify-content：space-around;
flex-flow：row wrap;
-webkit-flex-flow：換行;
-moz-flex-flow：換行;
}

。容器。item {width：130px; height：180px;背景：綠色; margin：0 1％24px; }

HTML部分

<div class="container"> 

    <div class="item"><a href='google.com'>Google</a></div> 
    <div class="item"><a href='google.com'>Yahoo</a></div> 
    <div class="item"><a href='google.com'>Bing</a></div> 
</div> 

<div class="container"> 
    <div class="item"><a href='google.com'>Google</a></div> 
    <div class="item"><a href='google.com'>Yahoo</a></div> 
    <div class="item"><a href='google.com'>Bing</a></div> 

</div>

enter image description here

來源

2014-02-25 15:46:02

它只顯示爲jsfiddle上的單個列，但。從圖片中也不清楚它是否以調整大小爲中心。根據這兩個容器判斷，隨着視口縮小/增長，它不會動態創建更少/更多的行。 – HulkingUnicorn 2014-03-03 11:52:32

這是不是你想要達到的效果？

http://jsfiddle.net/7Hq2E/21/

CSS：

.container { 
    display: flex; 
    display: -webkit-flex; 
    display: -moz-flex; 
    flex-flow: row wrap; 
    -webkit-flex-flow: row wrap; 
    -moz-flex-flow: row wrap; 
} 
.container .item { 
    width: 23%; 
    height: 180px; 
    background: red; 
    margin: 0 1% 20px; 
}

HTML：

<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div>

來源

2014-05-27 08:35:53

這種方法僅適用於您希望相同數量的元素能夠適合每條線，而不管容器的大小。提問者正在使用絕對單位（px）。他希望Windows資源管理器中的圖片縮略圖等行爲在每個項目之間調整空間，最後一行左對齊，並且每行上的項目數量根據可用空間而變化。 – turibe 2014-10-02 17:51:42

可惜，這是不可能的Flexbox的。

最好的解決方法是在最後一行添加隱形兒童'填滿'空'塊'。這樣，實際的，可見的元素左對齊。

類似的問題： Flex-box: Align last row to grid

來源

2014-10-22 09:55:15 sandstrom

簡明。這應該是被接受的答案。 – 2015-03-03 23:10:41

我想出了一個CSS唯一的解決方案..需要注意的是，它只能解決兩個缺失項目，所以只能在柔性網格中安全工作，每個包裝行最多包含三個項目。演示：http://codepen.io/lukejacksonn/pen/dozqVq 這裏的原則是使用僞元素作爲「*不可見的孩子*」，並賦予它們與容器中的項目相同的flex屬性。 – lukejacksonn 2015-06-18 19:43:43

這裏是一個很好解釋的工作：https：//css-tricks.com/filling-space-last-row-flexbox/ – 2015-09-02 08:45:17

-1

您可以使用Flexbox的與max-width（供應商前綴去掉）：

.container { 
    display: flex; 
    width: 100%; 
    justify-content: space-around; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

.column { 
    flex: 1 0 33.333%; 
    max-width: 33.333%; 
}

而且在CodePen的HTML

<div class="container"> 
    <div class="column">1</div> 
    <div class="column">2</div> 
    <div class="column">3</div> 
    <div class="column">4</div> 
</div>

查看：http://codepen.io/anon/pen/gpwEJW

來源

2015-05-23 10:43:11 bashaus

我th對於想要多個項目並允許響應的人來說，這個例子可能會很有用，網格項目根據視口的大小而變化。它不使用任何看不見的孩子，這一切都是通過CSS完成的。

當最後一行的項目較少並且需要頁面響應時，可能會幫助有人嘗試將項目對齊到左側。

http://codepen.io/kunji/pen/yNPVVb

樣本HTML

<div class="main-container"> 

    <div class="main-items-container"> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

     <div class="item-container"> 
      <h2>Item Name</h2> 
     </div> 

    </div> 

</div>

樣品CSS

.main-container { 
    max-width: 1000px; 
    min-width: 300px; 
    margin: 0 auto; 
    padding: 40px; 
    box-sizing: border-box; 
    border: 1px solid #000; 
} 

.main-items-container { 
    display: -ms-flexbox; 
    display: flexbox; 
    display: -webkit-flex; 
    display: -ms-flex; 
    display: flex; 
    padding: 0; 
    margin: 10px 0; 
    list-style: none; 
    width: auto; 
    -webkit-flex-flow: row wrap; 
    justify-content: flex-start; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
    -webkit-align-items: stretch; 
    align-items: stretch; 
    box-sizing: border-box; 
} 

@media (min-width: 971px) { 
    .item-container { 
    margin: 10px 2%; 
    width: 22%; 
    padding: 10px; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    } 
    .item-container:nth-child(4n+1) { 
    margin-left: 0; 
    } 
    .item-container:nth-child(4n) { 
    margin-right: 0; 
    } 
} 

@media (min-width: 550px) and (max-width: 970px) { 
    .item-container { 
    margin: 10px 2.50%; 
    width: 30%; 
    padding: 10px; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    } 
    .item-container:nth-child(3n+1) { 
    margin-left: 0; 
    } 
    .item-container:nth-child(3n) { 
    margin-right: 0; 
    } 
} 

@media (max-width: 549px) { 
    .item-container { 
    margin: 10px 0; 
    width: initial; 
    padding: 10px; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    } 
}

來源

2015-06-25 11:37:36 Kunji

明白了。（我認爲）（這是我的第一個貢獻！）

想象一下每行需要有4個圖像的佈局。 w：205 h：174 問題：使用justify-content：space-around，如果最後一行沒有4個圖像（有3個，2個或1個），他們不會尊重網格，它們會傳播。所以。

在HTML創建3周的div類「填充空空間，孩子的」這個樣子。

.filling-empty-space-childs { 
    width:205px; /*the width of the images in this example*/ 
    height:0; /*Important! for the divs to collapse should they fall in a new row*/ 
}

的Flexbox的容器具有顯示：彎曲/撓性包裝：包裝; /證明含量：空間周圍

最後行可具有4個，3，2，1圖像。 4圖片：沒問題，這三個divs會崩潰在一個新的行，因爲他們沒有高度。 3圖像：沒問題，一個div將在同一行中，看不見，另外兩個會換到一個新行，但會因爲沒有高度而摺疊。 2圖像：沒問題，兩個div將會在同一行，看不見，其餘...倒塌 1圖像：沒問題，三個div都要填入空格。

來源

2015-07-17 14:19:07

哈克但天才。如果使用React，額外的（n - 1）填充div可以很好地封裝在一個包裝組件中。 – Dave 2016-07-22 01:37:27

哇，真不錯。如果您只需要2列，此解決方案可以與'：after'混合使用。而且它也可以根據屏幕尺寸使用不同的列數。驚人！ – farwayer 2016-10-28 20:01:10

天才答案！我會說甚至比（n-1）增加更多空的孩子仍然運作良好！ – thomasdao 2016-11-02 22:15:22

您可以在最後Flex子項使用margin-right:auto。

這裏的問題是，您將失去此Flex項左側的屬性之間的空間。

希望它有幫助！

來源

2015-10-09 12:43:45 bzin

只適用於最後一行。如果有兩個或更多，他們將共享空間，並且每個人都將在該空間中對齊。 – momomo 2016-07-02 18:32:48

如何對齊多行柔性盒中的最後一行/最後一行

回答

相關問題