在flex父母列表中對齊子項
[英]Aligning child items in a list of flex parents
問題描述
我正在嘗試做一個非常簡單的兩列布局，這給了我一個麻煩。 我仍在學習彈性布局的技巧，因此我確定我缺少一些簡單的東西。 我想要一個<div>的垂直列表，每個垂直列表都是一個帶有兩個子<div>的flexbox。 第一個孩子的寬度根據內容而變化。 第二個孩子是flex-grow: 1 ，我希望這些項目在整個父母集合中左對齊。 取而代之的是，第一個孩子的大小適合於內容，而第二個孩子則在右側靠着它。
#resultsList { display: flex; flex-direction: column; } .result { display: flex; align-items: flex-start; justify-content: flex-start; } .result-text { flex: 1; }
<div id="resultsList"> <div class="result"> <div class="result-line">Line 147</div> <div class="result-text">Blah blah</div> </div> <div class="result"> <div class="result-line">Line 223</div> <div class="result-text">Resukt 2</div> </div> <div class="result"> <div class="result-line">Line 445</div> <div class="result-text">Quick brown fox</div> </div> </div>
我嘗試了align，justify等的多種組合，但始終得到相同（或更糟）的結果。
1 個解決方案
解決方案1
0 2018-09-25 21:15:08
可以，然后呢：
這里有很多彈性，所以基本原理是：
-
main-container保留所有內容，並將其顯示為flex。 固定寬度為600px。 -
sub-container是每個flex項目，顯示為column。 -
first-container是固定寬度（在這種情況下為150px），flex-grow: 1; -
content沒有彎曲增長屬性，因此內容的寬度也沒有。 -
padder具有flex-grow屬性，因此它將占用剩余的剩余空間。 -
second-container占用了其余的容器。
剩下的只是邊界的使用。 在適用的情況下，您可以將border-{top|bottom|left|right}為無，因此好像該框已伸出。 嘗試使用chrome開發工具查看每個組件的寬度。
.main-container { width: 600px; display: flex; flex-direction: column; } .sub-container { display: flex; } .first-container { border: 1px solid black; border-right: none; flex-grow: 1; display: flex; max-width: 150px; } .content { border-right: 1px solid black; padding: 10px; } .padder { flex-grow: 1; } .second-container { border: 1px solid black; border-left: none; flex-grow: 2; padding: 10px; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div class="main-container"> <div class="sub-container"> <div class="first-container"> <div class="content"> <p>text</p> </div> <div class="padder"></div> </div> <div class="second-container"> <p>text</p> </div> </div> <div class="sub-container"> <div class="first-container"> <div class="content"> <p>sample text</p> </div> <div class="padder"></div> </div> <div class="second-container"> <p>text</p> </div> </div> <div class="sub-container"> <div class="first-container"> <div class="content"> <p>more sample text</p> </div> <div class="padder"></div> </div> <div class="second-container"> <p>text</p> </div> </div> </div> <script type="text/javascript" src="app.js"></script> </body> </html>
使用 flex 垂直對齊項目會拉伸子元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.