flex-grow не расширяющийся гибкий элемент

Сначала я создаю макет с использованием flexbox:

<html>
  <body>
    <div id="header"></div>
    <div id="main"></div>
  </body>
</html>

Заголовок div имеет фиксированный height: 60px, а главный div занимает оставшуюся высоту экрана:

html, body{
  100%;
}
body{
  display: flex;
  flex-direction: column;   
}
#header{
  height: 60px;
  flex-grow: 0;
}
#main{
  flex-grow: 1;
}

Я получил то, что хочу:

заголовок и главный div

Затем я хочу отобразить три поля внутри #maindiv: box_1, box_2 и box_3. box_1 и box_3 имеют одинаковое значение высоты, а box_2 расширяется, чтобы взять оставшуюся высоту#main :

Что я хочу:

Я добавляю следующие коды:

<html>
  <body>
    <div id="header"></div>
    <div id="main">
      <div id="box_1"></div>
      <div id="box_2"></div>
      <div id="box_3"></div>
    </div>
  </body>
</html>

#main{
  flex-grow: 1;
  flex-direction: column;
}
#box_1, #box_3{
    height: 60px;
    flex-grow: 0;
    background-color: red;
}
#box_2{
    flex-grow: 1;
    background-color: blue;
}

Это #box_2невидимо, если я не установил значение высоты для #maindiv. Если значение высоты требуется, почему я должен использовать flexbox ...

html,css,html5,css3,flexbox,

1

Ответов: 1


0 принят

Основная проблема в вашем коде заключается в том, что вы не указали display: flexв #mainконтейнере.

Следовательно, элемент не является гибким контейнером, flex-direction: columnигнорируется, а дети не являются гибкими.

Имейте в виду, что свойства flex работают только между родительскими и дочерними элементами . Так что ваши display: flexна bodyэлемент относится только к детям, но не других потомков.

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

header {
  flex: 0 0 60px;               /* flex-grow, flex-shrink, flex-basis */
  background-color: lightgray;
}

main {
  flex-grow: 1;
  background-color: aqua;
  display: flex;                 /* key addition */
  flex-direction: column;
}

#box_1, #box_3 {
  flex: 0 0 60px;
  background-color: red;
}

#box_2 {
  flex-grow: 1;
  background-color: blue;
}
<header></header>
<main>
  <div id="box_1"></div>
  <div id="box_2"></div>
  <div id="box_3"></div>
</main>

HTML, CSS, HTML5, CSS3, Flexbox,
Похожие вопросы