justify-content и flex-grow игнорируются

Question

У меня проблема с флексбоксом CSS. У меня был рабочий код вчера, но сегодня, когда я тестировал свое решение, оно почему-то перестало работать. Это связано с flexbox.

Вот результат, который я хочу получить:

1. Чтобы иметь возможность позиционировать контент с помощью justify-content. Это не удается
2. Содержимое должно занимать все доступное пространство, поэтому оно должно иметь flex-grow: 1. Это также не удается.
3. Нижний колонтитул должен быть внизу, так как содержимое будет толкать его вниз, занимая все доступное пространство благодаря flex-grow: 1. Это терпит неудачу.

Кажется, что весь flexbox у меня перестал работать правильно.

Я считаю, что проблема в том, что по какой-то причине flexbox даже не отвечает правильно на это:

`justify-content: flex-start`

Если я попробую какие-либо другие значения, такие как center, flex-end и т.д., ничего не произойдет

Забавно, что вчера flexbox вел себя правильно, я мог расположить его с помощью justify-content, а сегодня не могу.

Чего мне здесь не хватает, почему по крайней мере justify-content: flex-end или justify-content: center не ведут себя правильно и не позиционируют контент?

Если я устраню проблему, из-за которой justify-content перестанет работать, я думаю, flex-grow также будет работать.

У кого-нибудь есть идеи, почему он плохо себя ведет?

Я могу смириться с поведением, используя эту игровую площадку, поэтому я знаю, что мой код должен работать. Мой код выше - именно то, что я сделал здесь, на игровой площадке: https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

.ikigai {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.header, .footer {
  height: 80px;
  margin: 10px;
  border: 1px dashed lightgray;
}

.content {
  margin: 10px;
  border: 1px dashed lightgray;
  flex-grow: 1;
}

<div class="ikigai">
  <div class="header">this is a header</div>
  <div class="content">content</div>
  <div class="footer">footer 12</div>
</div>

https://jsfiddle.net/re01pn2x/

Answer 1

Ваш гибкий контейнер не определен по высоте.

Поэтому по умолчанию используется height: auto (высота, управляемая содержимым).

Добавьте это к своему коду:

.ikigai {
   height: 100vh;
}

.ikigai {
  display: flex;
  flex-direction: column;
  /* justify-content: flex-start; */ /* default value; not necessary */
  height: 100vh;
}

.header, .footer {
  height: 80px;
  flex-shrink: 0; /* optional; if you don't want items to shrink vertically */
  margin: 10px;
  border: 1px dashed lightgray;
}

.content {
  margin: 10px;
  border: 1px dashed lightgray;
  flex-grow: 1;
}

body {
  margin: 0; /* override default margins; prevents vertical scrollbar */
}

<div class="ikigai">
  <div class="header">this is a header</div>
  <div class="content">content</div>
  <div class="footer">footer 12</div>
</div>

Подробнее: Как сделать div 100% высоты окна браузера?

---

justify-content

Обратите внимание, что justify-content не работал в вашем коде, потому что не было свободного места. Это свойство работает путем распределения свободного пространства в контейнере. В этом случае, поскольку контейнер по умолчанию height: auto, места было достаточно для размещения содержимого.

justify-content & flex-grow

Также обратите внимание, что даже если определено height, которое создает дополнительное пространство, justify-content не будет работать, если вы используете flex-grow. Зачем? Потому что flex-grow будет использовать это свободное пространство, опять же не оставляя места для justify-content для распределения.

Answer 2

Вы можете исправить, используя высоту: 100vh;

.ikigai {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100vh;
}

.header, .footer {
  height: 80px;
  margin: 10px;
  border: 1px dashed lightgray;
}

.content {
  margin: 10px;
  border: 1px dashed lightgray;
  flex-grow: 1;
}