html - 每行 FlexBox 元素

Question

我使用 flexbox 将一堆元素整齐地排列成一行。现在我需要为这些元素提供清晰的标题，以定义它们向我的最终用户显示的内容。我尝试使用另一个 flexbox，但是无论我如何设计它，它似乎与它下面的 flexbox 有不同的比例。

我读到过 row wrap 能够在多行上对元素进行分组，但这是动态执行的。此外，这里就同一主题在 SO 上提出了一个问题，回答是否定的。然而，这是在 2012 年 - 情况有变化吗？

或者，有没有更好的方法来解决这个问题？也许是一个包含一组垂直 flexbox 的水平 flexbox？

目标是对齐元素，使它们看起来像下图:

Image

我在这里建立了一个快速而肮脏的演示:https://jsfiddle.net/qLveL7ae/

Answer 1

认为这里最重要的是让你的标题与其下面的框保持相同的宽度。这个布局怎么样:(抱歉无法处理您的类名和内联样式)。

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-direction: column;
  max-width: 1024px;
  margin: 0 auto;
}

.top {
  display: flex;
  justify-content: space-around;
  outline: 1px solid red;
}

.top a {
  width: 15.5%;
  text-align: center;
  text-decoration: none;
  padding: 10px 20px;
  color: black;
}

.bottom {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  outline: 1px solid red;
}

.box {
  width: 15.5%;
}

.box-short {
  height: 200px;
  border: 1px solid black;
}

.box-full {
  height: 300px;
  border: 5px solid black;
}

<div class="wrapper">
  <section class="top">
    <a href="#">title</a>
    <a href="#">title</a>
    <a href="#">title</a>
    <a href="#">title</a>
    <a href="#">title</a>
    <a href="#">title</a>
  </section>
  <section class="bottom">
    <div class="box box-short"></div>
    <div class="box box-full"></div>
    <div class="box box-full"></div>
    <div class="box box-full"></div>
    <div class="box box-full"></div>
    <div class="box box-short"></div>
  </section>
</div>