Ширина flex элемента по его содержимому?

13 апреля 2021, 01:50

Вот есть такой код. В нём флекс элементы имеют высоту по его содержимому, но при этом расположение элементов растягивается на высоту флекс контейнера, а нужно что бы не растягивалась, вот так

https://prnt.sc/ogcyqe

body { 
  height: 200px; 
 
} 
.flex { 
  border: 1px solid; 
  width: 50%; 
  height: 100%; 
  display: flex; 
  flex-wrap: wrap; 
   
  align-items: flex-start; 
} 
 
.elem { 
  border: 1px solid red; 
}

<div class="flex"> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
</div>

Answer 1

Тебе нужен align-content: flex-start;

body { 
  height: 200px; 
 
} 
.flex { 
  border: 1px solid; 
  width: 50%; 
  height: 100%; 
  display: flex; 
  flex-wrap: wrap; 
  align-content: flex-start; 
  align-items: flex-start; 
} 
 
.elem { 
  border: 1px solid red; 
}

<div class="flex"> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
  <div class="elem">Element</div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Передача параметров в шаблонах по значению и по ссылке

Пишу шаблон функции:

c++

Умножение матрицы на поинт

Имеется матрица (допустим 3x3) которая применяется для преобразования некоего массива двумерных точек (допустим std::vector<Point>)Как это грамотно...

c++

Ошибка парсинага ConfigParser

Есть проблема определения команд СonfigParser'омВыполнял следующую последовательность действий:

c++

Удаление функций C++

Если функция является зарезервированным набором команд в памяти, то могу ли я её удалить? Если да, то как?