Как создать столбцы одинаковой высоты, используя Materialize и Flexbox? - PullRequest
Новая
       19

Как создать столбцы одинаковой высоты, используя Materialize и Flexbox?

0 голосов
/ 15 января 2019

Я пытаюсь использовать Flexbox для растягивания панели, которую я создал с помощью Materialize.

Это HTML, который создает мои панели: 

<div class="row">   
    <div class="col s6">
        <div class="card-panel">
            panel1
        </div>
        <div class="card-panel">
            panel2
        </div>
        <div class="card-panel">
            panel3
        </div>
    </div>
    <div class="col s6">
        <div class="card-panel">
            panel4
        </div>
    </div>
</div>

И вот результат:

img

Теперь я хотел бы растянуть panel4, чтобы сделать его заподлицо с основанием panel3.

Возможно, это возможно с помощью Flexbox, но я не могу понять, как заставить Materialise и Flexbox работать вместе

1 Ответ

0 голосов
/ 15 января 2019

Materilize использует поплавки, которые будут отменены в flexbox, поэтому нам придется выкладывать каждый столбец отдельно, используя flexbox и flex-direction:Column.

Затем мы говорим каждой карточной панели занимать как можно больше места, используя flex:1.

Вот так: 

.row {
  display: flex;
}

.col {
  display: flex;
  flex-direction: column;
}

.card-panel {
  flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<div class="row">
  <div class="col s6">
    <div class="card-panel">
      panel1
    </div>
    <div class="card-panel">
      panel2
    </div>
    <div class="card-panel">
      panel3
    </div>
  </div>
  <div class="col s6">
    <div class="card-panel">
      panel4
    </div>
  </div>
</div>
...