使柔性項目採取新行

的100％的寬度我有HTML結構等：使柔性項目採取新行

<div class="container"> 
    <div class="btn-1"></div> 
    <div class="btn-2"></div> 
    <div class="btn-3"></div> 

    <div class="text"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias. 
    </div> 
</div>

BTN-1應被對準到左上角，所有其他按鈕（BTN-2，BTN-3 ...）應該與右上角對齊。
所有這些按鈕之後的文本應該是100％寬度。

快速樣機：

我想通了，第一部分（按鈕）有：

.container { 
    display: flex; 
    justify-content: flex-end; 
} 
.btn-1 { 
    /* align first button to the left */ 
    margin-right: auto; 
}

卜不管我做什麼，文本不流向下一行...

這是我的JSFiddle https://jsfiddle.net/an0o7taq/

感謝您的幫助！

來源

2017-10-14 Marvin3

邊注：汽車保證金就足夠了。你不需要'justify-content'。 –

您需要將flex-wrap: wrap添加到容器中。

默認情況下，flex容器設置爲flex-wrap: nowrap，強制項目保留在一行上。

revised jsfiddle

規格參考：

5.2. Flex Line Wrapping: the flex-wrap property

來源

2017-10-14 11:49:26

謝謝，這與我所需要的非常接近，但是現在文本與父級的中間對齊 - https://jsfiddle.net/o3ucfbrg/（而不是正下方的按鈕）。有沒有辦法改變這個？我嘗試了align-self：flex-start on「text」元素，但它似乎沒有幫助。 – Marvin3

這是因爲您向容器添加了高度。現在你需要添加'align-content：flex-start'（[revision revision]（https://jsfiddle.net/o3ucfbrg/1/））。 –

[刪除多行柔性項目之間的空間（間隙）]（https://stackoverflow.com/q/40890613/3597276） –

你需要用不同的柔性流動和樣式的更多容器。提示：學習最重要的柔性道具：align-items，flex-flow，justify-content。它們全部適用於集裝箱的直接兒童。所以當你想要你的佈局時，你需要更多的容器和不同的彈性流。

本指南對我有所幫助。他們也有很好的例子：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
} 
 

 
.header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    margin-bottom: 20px; 
 
} 
 

 
.header-left, .header-right { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
} 
 

 
.btn { 
 
    width: 40px; 
 
    height: 40px; 
 
    border: 1px solid #ddd; 
 
    background-color: #eee; 
 
} 
 

 
.text { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    <div class="header-left"> 
 
     <div class="btn">btn1</div> 
 
    </div> 
 
    <div class="header-right"> 
 
     <div class="btn">btn2</div> 
 
     <div class="btn">btn3</div> 
 
    </div> 
 
    </div> 
 
    <div class="text"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias. 
 
    </div> 
 
</div>

來源

2017-10-14 12:11:21 Daniel

使柔性項目採取新行

回答

相關問題