在flex父母列表中对齐子项
[英]Aligning child items in a list of flex parents
问题描述
I am trying to do a very simple two-column layout that is giving me a hard time. 
我正在尝试做一个非常简单的两列布局，这给了我一个麻烦。 I am still learning the art of flex layout so I'm sure there is something simple that I'm missing. 我仍在学习弹性布局的技巧，因此我确定我缺少一些简单的东西。 I want a vertical list of <div> s, each of which is a flexbox with two child <div> s. 我想要一个<div>的垂直列表，每个垂直列表都是一个带有两个子<div>的flexbox。 The width of first child varies based on content. 第一个孩子的宽度根据内容而变化。 The second child is flex-grow: 1 , and I want those items to left-align across the set of parents. 第二个孩子是flex-grow: 1 ，我希望这些项目在整个父母集合中左对齐。 Instead, the first child is sized to content, and the second butts up against it on the right. 取而代之的是，第一个孩子的大小适合于内容，而第二个孩子则在右侧靠着它。
#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>
I have tried many combinations of align, justify, etc. but I always get the same (or a worse) result. 我尝试了align，justify等的多种组合，但始终得到相同（或更糟）的结果。
1 个解决方案
解决方案1
0 2018-09-25 21:15:08
Okay so: 可以，然后呢：
I think is this what you mean right? 我想这是您的意思吗？
There's a lot of flex going on here so the basic principles are: 这里有很多弹性，所以基本原理是：
-
main-containerholds everything, displaying it asflex.main-container保留所有内容，并将其显示为flex。 Fixed width of600px.固定宽度为600px。 -
sub-containeris each flex item, being display ascolumn.sub-container是每个flex项目，显示为column。 -
first-containeris a fixed width (in this case:150px) andflex-grow: 1;first-container是固定宽度（在这种情况下为150px），flex-grow: 1; -
contentdoes not have a flex grow property, and so is only the width of its content.content没有弯曲增长属性，因此内容的宽度也没有。 -
padderhas aflex-growproperty, so it will take up the rest of the remaining space.padder具有flex-grow属性，因此它将占用剩余的剩余空间。 -
second-containertakes up the rest of the container.second-container占用了其余的容器。
The rest is just the use of borders. 剩下的只是边界的使用。 Where applicable you can make border-{top|bottom|left|right} to none, so it appears as if the box is extended out. 在适用的情况下，您可以将border-{top|bottom|left|right}为无，因此好像该框已伸出。 Try using the chrome dev tools to see the width of each component. 尝试使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.