如何使我的页眉布局像这样？

Question

很难让我的页眉看起来像这样，其中左侧和右侧采用可能的最小宽度： 到目前为止我有什么：

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

header div {
  min-height: 7rem;
  display: flex;
  align-items: center;
  padding: 2rem 5rem;
  background-color: blue;
}

.center {
  background-color: yellow;
}

.right {
  background-color: red;
}

<header>
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</header>

Answer 1

使用flex-grow: 1.

这可以使用 display: flex 和 flex-grow: 1 轻松实现。

了解更多关于 flexbox 的信息：

• A Complete Guide to Flexbox
• W3Schools

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
}

header div {
  min-height: 7rem;
  align-items: center;
  padding: 2rem 3rem;
  background-color: blue;
}

.center {
  background-color: yellow;
  flex-grow: 1;
}

.right {
  background-color: red;
}

<header>
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</header>

Answer 2

对网格布局使用 1fr 1fr 1fr 意味着每个项目都具有相同的宽度 - 它们之间共享可用宽度。

如果您希望左侧和右侧占据包含它们所需的最小宽度，请将它们设置为 auto，将中间的设置为 1fr。中间的那个会占据所有剩余的宽度。

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

header div {
  min-height: 7rem;
  display: flex;
  align-items: center;
  padding: 2rem 5rem;
  background-color: blue;
}

.center {
  background-color: yellow;
}

.right {
  background-color: red;
}

<header>
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</header>

了解更多信息：

• 网格完全指南
• `fr` 简介 CSS 单位

Answer 3

1fr 1fr 1fr 通过给定相同的宽度来制造问题 所以我使用了 auto 1fr auto 通过设置自动，它可以根据父级相对改变左右宽度。 或者您可以设置左右值，例如：0.2fr 0.2fr

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

header div {
  min-height: 7rem;
  display: flex;
  align-items: center;
  padding: 2rem 5rem;
  background-color: blue;
}

.center {
  background-color: yellow;
}

.right {
  background-color: red;
}

<header>
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</header>