it-swarm.com.ru

Как сделать так, чтобы гибкий элемент не заполнял высоту гибкого контейнера?

Как вы можете видеть из кода ниже, левый div внутри гибкого контейнера растягивается до высоты правого div. Есть ли атрибут, который я могу установить, чтобы сделать его высоту минимально необходимой для хранения его содержимого (как обычно height: auto divs вне flex-контейнеров)?

#a {
  display: flex;
}
#a > div {
  background-color: red;
  padding: 5px;
  margin: 2px;
}
#b {
  height: auto;
}
<div id="a">
  <div id="b">left</div>
  <div>right<br>right<br>right<br>right<br>right<br></div>
</div>
58
user81993

Атрибут align-items или соответственно align-content контролирует это поведение.

align-items определяет позиционирование элементов перпендикулярно к flex-direction.

По умолчанию flex-direction - row, поэтому вертикальное размещение можно контролировать с помощью align-items.

Существует также атрибут align-self для управления выравниванием для каждого элемента.

#a {
  display:flex;

  align-items:flex-start;
  align-content:flex-start;
  }

#a > div {
  
  background-color:red;
  padding:5px;
  margin:2px;
  }
 #a > #c {
  align-self:stretch;
 }
<div id="a">
  
  <div id="b">left</div>
  <div id="c">middle</div>
  <div>right<br>right<br>right<br>right<br>right<br></div>
  
</div>

у css-tricks есть отличная статья по теме. Я рекомендую прочитать это пару раз.

79
Sebastian Wozny

Когда вы создаете флекс-контейнер, вступают в действие различные стандартные флекс-правила.

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

Если вы не хотите растягивать гибкие элементы - то есть, как вы написали:

сделать его высоту минимально необходимой для хранения содержимого

... затем просто переопределите значение по умолчанию с помощью align-items: flex-start.

#a {
  display: flex;
  align-items: flex-start; /* NEW */
}
#a > div {
  background-color: red;
  padding: 5px;
  margin: 2px;
}
#b {
  height: auto;
}
<div id="a">
  <div id="b">left</div>
  <div>
    right<br>right<br>right<br>right<br>right<br>
  </div>
</div>

Вот иллюстрация из спецификации flexbox , которая выделяет пять значений для align-items и то, как они позиционируют flex-элементы в контейнере. Как упоминалось ранее, stretch является значением по умолчанию.

enter image description here Источник: W3C

28
Michael_B