如何使我的标题布局是这样的？
如何使我的标题布局是这样的？
提问于 2022-03-22 18:19:58
很难让我的头看起来像这样，在这里左右取最小的宽度：
到目前为止我所拥有的是：
*,
*::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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-03-22 18:28:09
对网格布局使用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>
在以下网站了解更多信息：
Stack Overflow用户
发布于 2022-03-22 18:23:43
使用flex-grow: 1。
使用display: flex和flex-grow: 1可以很容易地实现这一点。
了解有关柔性盒的更多信息：
*,
*::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>
Stack Overflow用户
发布于 2022-03-22 19:06:16
1FR1FR1FR通过给出相同的宽度造成问题，所以我用了AUTOR1FR自动设置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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71577108
复制相关文章
相似问题
腾讯云开发者
