时间戳

首页 > 解决方案 > 对齐弹性父项列表中的子项

css - 对齐弹性父项列表中的子项

问题描述

我正在尝试做一个非常简单的两列布局，这让我很难过。我仍在学习 flex 布局的艺术，所以我确信我缺少一些简单的东西。我想要一个 s 的垂直列表<div>，每个列表都是一个带有两个 child<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>

我尝试了许多对齐、对齐等组合，但我总是得到相同（或更差）的结果。

标签： cssflexbox

解决方案

可以，然后呢：

我想这就是你的意思吗？

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

  • main-container包含所有内容，将其显示为flex. 的固定宽度600px。
  • sub-container是每个弹性项目，显示为column.
  • first-container是固定宽度（在这种情况下：150px）和flex-grow: 1;
  • content没有 flex grow 属性，因此只有其内容的宽度。
  • 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>

推荐阅读