Flex Box: максимальная поперечная ширина

Question

Я пытаюсь использовать CSS flex для создания простого макета:

┌────────────────┐
│ body           │
│   ┌────────┐   │
│   │ header │   │
│   ├────────┤   │
│   │  main  │   │
│   ├────────┤   │
│   │ footer │   │
│   └────────┘   │
└────────────────┘

Пока у меня есть:

body {
display: flex;
flex-direction: column;
min-height: 100vh;	
}
main {
flex: 1;
}
header, main, footer {
border: thin solid #ccc;
margin: 4px;
}

<header>
Header
</header>
<main>
Main
</main>
<footer>
Footer
</footer>

Какое свойство мне нужно установить, чтобы header, main и footer были установлены на одинаковую ширину, вплоть до наборамаксимум, сохраняя их по центру?

Answer 1

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

header,
main,
footer {
  min-width: 200px;  /* demo */
  max-width: 400px;  /* demo */
  border: thin solid #ccc;
  margin: 4px auto;  /* left and right auto margins for centering */
}

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

main {
  flex: 1;
}

header,
main,
footer {
  min-width: 200px;
  max-width: 400px;
  border: thin solid #ccc;
  margin: 4px auto;
}

<header>Header</header>
<main>Main</main>
<footer>Footer</footer>

Answer 2

Вы можете легко сделать это с помощью сетки CSS:

body {
  display:grid;
  grid-template-rows: auto 1fr auto;
  justify-content:center;
  grid-gap:4px;
  min-height: 100vh;
  margin:0;
}

header,
main,
footer {
  border: thin solid #ccc;
}

<header>
  Header
</header>
<main>
  Main
</main>
<footer>
  Footer
</footer>

Или рассмотрите возможность поведения усадки inline-flex:

body {
  text-align:center;
  margin:0;
}
.container {
  display: inline-flex;
  flex-direction: column;
  min-height: 100vh;
  text-align:left;
}

main {
  flex: 1;
}

header,
main,
footer {
  border: thin solid #ccc;
  margin: 4px;
}

<div class="container">
<header>
  Header
</header>
<main>
  Main
</main>
<footer>
  Footer
</footer>
</div>