如何使用CSS Grid和/或/或不使用Flexbox来制作自适应响应灵活的页眉？
好的，我的头模块有一个徽标，一个电话组件和一个篮子组件。这是标题：
这就是我想要做的：
- 自适应响应页眉，因此它在400-1920px的视口宽度上看起来很漂亮。
- 能够以任何顺序重新排序所有页眉组件。
- 当视口宽度大于640px时，我希望徽标在左侧，电话和篮子模块在右侧，如上图所示。
- 当视口宽度为480-640px时，我希望手机和篮子组件都在第二行，并且希望它们的边缘到外部边框的距离相同，如下所示：
<代码>G210
- 默认情况下，当视口宽度小于480px时，我希望徽标在第一行，手机在第二行，篮子在第三行，如下所示：
- 但我想能够在不编辑html的情况下交换徽标和电话组件，使其看起来像这样：
我做不到，所以它符合所有的要求。这是我到目前为止想出的最好的：https://next.plnkr.co/edit/9nHCyGk2KC8ZO9JA?preview
我可以交换电话和篮子，但不能交换电话和徽标，也不能交换篮子和徽标。如果我从html中删除<div class="pg-Header_phoneBasketContainer">元素，并相应地直接在电话和篮子上应用grid-area: phone和grid-area: basket，那么我不能使电话和篮子边缘到外部边框的距离相同，因为第二行将有2个单元格，它将定位网格项相对于它们的单元格，而这些项的长度不同，因此到边框的距离将不同。
如果我可以在网格容器的间接子容器上使用网格定位，那么使用网格区域就很容易做到。我只需要为容器定义适当的grid-template-areas，并在不同的视窗中为.pg-Header_phoneBasketContainer、.pg-Header_phone和.hdr-Basket定义适当的grid-area属性：
.hdr-Top {
display: grid;
grid-template-areas: "logo phoneBasket";
}
.pg-Header_logo {
grid-area: logo;
}
.pg-Header_phoneBasketContainer {
grid-area: phoneBasket;
}
@media only screen and(max-width: 480px) {
.hdr-Top {
display: grid;
grid-template-areas: "phone" "logo" "basket";
}
.pg-Header_phone {
grid-area: phone;
}
.hdr-Basket {
grid-area: basket;
}
}它会在更大的屏幕上产生这样的结果：
这是在较小的：
不幸的是CSS Grid doesn't allow grid positioning of indirect children。你知道我如何才能实现我想要实现的目标吗？
回答 1
Stack Overflow用户
发布于 2018-08-28 06:25:18
对于小屏幕，您不能划分phoneBasket并将logo放在中间-但您可以通过一个容器和3个子容器来实现您想要的效果。
这样你就可以使用grid-template-areas属性对网格项目进行重新排序：
.header {
padding: .25rem;
border-bottom: 1px solid #333;
display: grid;
grid-template-columns: 1fr auto auto;
grid-template-areas: "logo phone basket";
align-items: center;
grid-gap: .5rem;
}
.header-item {
padding: .5rem;
background-color: #ccc;
}
.logo {
font-weight: 700;
text-transform: uppercase;
grid-area: logo;
}
.phone {
grid-area: phone;
}
.basket {
border: 2px solid #999;
grid-area: basket;
}
@media (max-width: 640px) {
.header {
grid-template-areas: "logo logo" "phone basket";
grid-template-columns: auto;
justify-content: center;
text-align: center;
}
}
@media (max-width: 480px) {
.header {
grid-template-areas: "phone" "logo" "basket";
}
}<div class="header">
<div class="header-item logo">MyCompany</div>
<div class="header-item phone">555-3535</div>
<div class="header-item basket">3 items</div>
</div>
https://stackoverflow.com/questions/52040242
复制相似问题