很難讓我的標題看起來像這樣，左右盡可能的最小寬度：如何使我的標題布局是這樣的？到目前為止我所擁有的：

如何使我的標題布局是這樣的？

*,
*::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>

uj5u.com熱心網友回復：

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 單元簡介

uj5u.com熱心網友回復：

使用`flex-grow: 1`.

這可以使用display: flex和輕松實作flex-grow: 1。

了解有關彈性盒的更多資訊：

Flexbox 完整指南
W3學校

*,
*::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>

uj5u.com熱心網友回復：

1fr 1fr 1fr 通過給出相同的寬度來創建問題，所以我通過設定 auto 使用 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/446909.html

標籤：html css CSS网格

上一篇：為什么浮動：CSS屬性在@media查詢中不起作用？

下一篇：CSS特異性順序

如何使我的標題布局是這樣的？

使用flex-grow: 1.

使用`flex-grow: 1`.