每行FlexBox元素

Question

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

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

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

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

Image

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

Answer 1

认为最重要的是保持标题的宽度与下面的方框相同。这个布局怎么样:(抱歉，不能处理你的班级名称和内联样式）。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

也许是一个包含一组垂直柔性箱的水平弹箱？

我将如何做到这一点。这样的事情。

＆＃13;

＆＃13;

.flex {
  display: flex;
}
.col {
  flex-direction: column;
  border: 1px solid black;
  height: 300px;
}
h1 {
  padding: 0 .5em;
}
.col:first-child, .col:last-child {
  height: 200px;
}
.col > div {
  border: 1px solid red;
  flex-grow: 1;
}

＆＃13;

<div class="flex">
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  <div class="flex col">
    <h1>title</h1>
    <div>content</div>
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;