Html CSS Flex Box：改变每行上的项目数

作为练习，我正在使用Flex Box实现以下布局：

┌───────────────────────────────┐
│ header                        │
└───────────────────────────────┘
┌─────┐ ┌───────────────────────┐
│ nav │ │ main                  │
│     │ │                       │
└─────┘ └───────────────────────┘
┌───────────────────────────────┐
│ footer                        │
└───────────────────────────────┘

我最初的想法是使用：

body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

但我不知道剩下的该怎么办。目前我使用：

header,footer {
    width: 100%;
}
nav {
    flex-basis: 0;
    flex-grow: 1;
}
main {
    flex-basis: 0;
    flex-grow: 4;
}

进行了一些额外的微调

这是可行的，但似乎是人为的

另一种解决方案是将nav和main元素封装在div中，但我试图避免这样做，因为这会降低灵活性

---

问题是，在某些行上有一个元素，而在其他行上有多个元素的布局最合适的方式是什么？

您应该添加两件事：

1使主体显示：flex将其转换为flex容器

2使用flex速记在页眉和页脚上表示flex增长和基础。通过使基准为100vw，可以使does flex项达到视口宽度的100%

flex: 1 100vw;

希望这有助于： 身体{ 显示器：flex； 弯曲方向：行； 柔性包装：包装； 背景：红色； 保证金：0； } 页眉、页脚{ 宽度：100%； 背景：蓝色； 弹性：100vw； } 导航{ 弹性基准：0； 柔性生长：1； 背景：绿色； } 主要{ 弹性基准：0； 弹性生长：4； 背景：粉红色； }         该点位于需要定义的flex basis中，即不同于auto的初始值，以便能够包装其他元素，如果首选方法是在没有其他父元素的情况下进行包装，这是非常好的：

$按钮：类型的第一个。单击函数{ $'3'。insertAfter'。insertAfter'； }; $按钮：类型的最后一个。单击函数{ $'div:not.first'。切换类'flexBasis'； }; 身体{ 显示器：flex； 柔性包装：包装； } 正文>*{文本对齐：居中} 页眉、页脚{ 弹性基准：100%； 背景：f88； } 导航{ 弹性基准：20%； 背景：浅绿色； } 主要{ 弹性基准：80%； 背景：浅蓝色； } .首先{ 弹性基准：33.33%； 背景：浅灰色； } div{ 弹性：1；/*不够*/ 背景：灰色； } .flexBasis{ 弹性：125%；/*足够*/ } .insertAfter~div{color:fff；background:000} 添加 切换弹性基础 标题 导航 主要的 1. 1. 1. 2. 2. 2. 2.

---

对不起，我已经添加了display:flex属性。我没有在代码中提到它，因为它不是问题的一部分。不过，我会把它添加到问题中。至于宽度，我计划使用不同的宽度。谢谢你的建议。我提到的宽度只适用于页眉和页脚。我的回答中有没有什么不符合你的要求。我问这个是为了能修好它