CSS Flex Box：改变每行的项目数答案

【问题标题】：CSS Flex Box: varying the number of items on each rowCSS Flex Box：改变每行的项目数
【发布时间】：2018-09-17 01:45:13
【问题描述】：

作为一个练习，我正在使用 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 中，但我试图避免这种情况，因为它会降低灵活性。

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

【问题讨论】：

标签： html css layout flexbox

【解决方案1】：

该点在flex-basis 中需要定义，即不同于auto 的初始值，以便启用附加元素的包装，如果首选方式是这样做的话没有额外的父元素，这很好：

$('button:first-of-type').click(function(){
  $('<div>3</div>').insertAfter('.insertAfter');
});

$('button:last-of-type').click(function(){
  $('div:not(.first)').toggleClass('flexBasis');
});

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

body > * {text-align: center}

header, footer {
  flex-basis: 100%;
  background: #f88;
}

nav {
  flex-basis: 20%;
  background: lightgreen;
}

main {
  flex-basis: 80%;
  background: lightblue;
}

.first {
  flex-basis: 33.33%;
  background: lightgray;
}

div {
  flex: 1; /* not enough */
  background: gray;
}

.flexBasis {
  flex: 1 25%; /* enough */
}

.insertAfter ~ div {color: #fff; background: #000}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Add</button>
<button>Toggle flex-basis</button>

<header>Header</header>
<nav>Nav</nav>
<main>Main</main>
<div class="first">1</div>
<div class="first">1</div>
<div class="first">1</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div class="insertAfter">2</div>
<footer>Footer</footer>

【讨论】：

【解决方案2】：

你应该添加两件事：

1) 将 body display:flex 变成一个弹性容器

2) 使用flex 简写来指示页眉和页脚的弹性增长和基础。通过将基础设置为 100vw，您可以使项目 100% 的视口宽度

flex: 1 100vw;

希望这会有所帮助:)

body {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: red;
    margin:0;
}

header,footer {
    width: 100%;
    background: blue;
    flex: 1 100vw;
}
nav {
    flex-basis: 0;
    flex-grow: 1;
     background: green;
}
main {
    flex-basis: 0;
    flex-grow: 4;
     background: pink;
}

<body>
<header>&nbsp</header>
<nav>&nbsp</nav>
<main>&nbsp</main>
<footer>&nbsp</footer>
</body>

【讨论】：

抱歉，我已经添加了display: flex 属性。我没有在我的代码中提到它，因为它不是问题的一部分。不过，我会将其添加到问题中。至于宽度，我打算使用不同的宽度。感谢您的建议。
我提到的宽度仅适用于页眉和页脚。我的回答中有什么不是你问的。我问了这个，所以我可以解决它