Как использовать CSS Flexbox с div, которые имеют разную высоту - PullRequest
Новая
       12

Как использовать CSS Flexbox с div, которые имеют разную высоту

0 голосов
/ 08 марта 2020

У меня есть страница с пятью различными панелями, и каждая панель имеет разную высоту, связанную с ней, и некоторые из них имеют разную ширину. Я давно хотел использовать CSS Flexbox с идеей, что эти панели будут накладываться друг на друга, когда им нужно будет реагировать.

Проблема, с которой я столкнулся, заключается в том, что, когда я пытался использовать CSS Flexbox, он устанавливает все элементы div на одинаковую высоту, чего на самом деле я не хочу.

Вот мой Haml, который генерирует мой HTML: 

.property-information
  .general-information-panel
     enough content for a height of 60px;
  .government-information-panel 
     enough content for a height of 100px;
  .owner-information-panel 
     enough content for a height of 80px;

CSS: 

.property-information{
  font-size: 15px;
  opacity: .75;
  display: inline-flex;
  justify-content: space-between;
}

.general-information-panel{
  background-color: #e7f5fe;
  width: 400px;
}
.government-information-panel{
  background-color: #e7f5fe;
  width: 500px;
}
.property-owner-information-panel{
  background-color: #e7f5fe;
  width: 400px;
}

Можно ли использовать Flexbox CSS, с div или панели разной высоты?

1 Ответ

0 голосов
/ 08 марта 2020

Я запустил фрагмент, тем не менее, я не совсем уверен в ваших ожиданиях.
Схема была бы очень признательна.

После этого я могу попытаться помочь вам, отредактировав этот фрагмент. 

container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  border: 1px solid red;
  width: 300px;
}

row {
  width: 200px;
  height: 50px;
}

#a {
  background-color: #fad390;
}

#b {
  background-color: #f8c291;
  width: 100px;
  height: 100px;
}

#c {
  background-color: #6a89cc;
}

#d {
  background-color: #82ccdd;
  width: 300px;
  height: 300px;
}

#e {
  background-color: #b8e994;
}
<container>
  <row id="a"></row>
  <row id="b"></row>
  <row id="c"></row>
  <row id="d"></row>
  <row id="e"></row>
</container>
...