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

您可以使用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>

Answer 2

将此添加到您的代码中：

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>

伸缩盒：最大交叉宽度

2 个答案: