Выравнивание дочерних элементов в списке гибких родителей - PullRequest
Новая
       6

Выравнивание дочерних элементов в списке гибких родителей

0 голосов
/ 25 сентября 2018

Я пытаюсь сделать очень простой макет из двух колонок, который доставляет мне трудности.Я все еще изучаю искусство гибкой верстки, поэтому я уверен, что есть кое-что простое, что мне не хватает.Я хочу вертикальный список <div> с, каждый из которых является flexbox с двумя дочерними <div> с.Ширина первого дочернего элемента зависит от содержимого.Второй дочерний элемент - 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>

Я пробовал много комбинаций выравнивания, выравнивания и т. Д., Но всегда получаю один и тот же (или худший) результат.

1 Ответ

0 голосов
/ 26 сентября 2018

Ладно, так:

Я думаю, это то, что вы имеете в виду, верно?

Здесь много гибкости, поэтому основные принципы:

  • main-container содержит все, отображая его как flex.Фиксированная ширина 600px.
  • sub-container - это каждый элемент flex, отображаемый как 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...