гибкая растущая не расширяющаяся гибкая деталь - PullRequest
Новая
       10

гибкая растущая не расширяющаяся гибкая деталь

0 голосов
/ 25 августа 2018

Сначала я создаю макет с помощью 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;
}

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

header and main div

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

What I want:

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

<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 невидим, если я не установлю значение высоты на #main div. Если требуется значение высоты, почему я все еще должен использовать flexbox ...

1 Ответ

0 голосов
/ 25 августа 2018

Основная проблема в вашем коде заключается в том, что вы не указали 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...