Question

我正在尝试做一个非常简单的两列布局，这给我带来了困难。我仍在学习弹性布局的技巧，因此我确定我缺少一些简单的东西。我想要一个<div> s的垂直列表，每个列表都是一个带有两个子<div> s的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等的许多组合，但是我总是得到相同（或更糟的结果）。

Answer 1

好吧：

I think is this what you mean right?

这里有很多弹性，所以基本原理是：

main-container保留所有内容，并将其显示为flex。固定宽度600px。
sub-container是每个弹性项目，显示为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父母列表中对齐子项

1 个答案: