Структура FlexBox Layout

Question

привет Я пытаюсь создать макет flexbox со следующей css и структурой:

header / main / footer Я провел небольшое исследование по flex: 1 и в итоге не понял, как его применять он и мой нижний колонтитул должны быть такими:

export default function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      <div style={{ flex: "none", background: "blue" }} />
      <div style={{ flex: "1 500px", background: "red" }} />
      <div style={{ flex: "none", background: "yellow" }} />
    </div>
  );
}

пример:

https://codesandbox.io/s/throbbing-feather-cmxiq

в основном мой У меня проблема с div которые по какой-то причине не появляются в моем теле

Answer 1

Внутренние div все пустые. И по своей природе, пустое div рухнет, если не дать явную высоту.

В вашем случае верхняя и нижняя div s в итоге получат 0px высоту, потому что она пустая и настроена на то, чтобы не сгибаться, и не будет отображаться вообще. Средний имеет flex-basis 500px и, таким образом, отображается как единственный видимый элемент. Смотрите ниже для скриншота. Хорошим началом будет либо добавление контента, либо установка явной высоты (или flex-based) в верхнем / нижнем колонтитуле.