Как растягивать элементы по горизонтали при использовании flex-box - PullRequest
Новая
       9

Как растягивать элементы по горизонтали при использовании flex-box

0 голосов
/ 07 ноября 2018

Я пытаюсь растянуть внутренние объекты по горизонтали, чтобы они заполнили ширину своего контейнера.

вот мой код: 

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>

<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</body>
</html>

Высота внутренних элементов div растянута благодаря свойству: 

align-items: stretch;

Как растянуть ширину этих элементов тоже?

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

Вы используете flexbox со значением по умолчанию flex-direction: row. Который помещает элементы в ряд и регулирует их ширину на основе их первоначальной ширины и гибких свойств.

Это означает, что align-items: stretch; будет растягивать элементы таким образом, чтобы они соответствовали родительскому элементу, но не по ширине, а по высоте. поскольку их ширина определяется свойством flex;

используйте flex: 1 1 auto;, чтобы элемент соответствовал родительскому элементу.

Подробнее см. https://css -tricks.com / snippets / css / a-guide-to-flexbox / .

0 голосов
/ 07 ноября 2018

Просто добавьте flex:1, чтобы согнуть элементы: 

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  flex: 1;
}
<h1>The align-items Property</h1>

<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

Это руководство может быть очень полезным для вас: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...