flexboxで横並びliにて複数行のバラバラな高さを揃えたい

###前提・実現したいこと
理想：
flexboxを使いコンテンツを横並びにする時、複数行でも内容を天地中央センタリングしたい。
かつhoverの当たる範囲も全て同じにしたい。

現実：
行数が変わるとその行の中で一番高いものに合わせるので、各行高さがバラバラになる。
またhoverで色を変えるようにしても天地が合わない。

###該当のソースコード

html
1<div class="fb">
2  <ul>
3    <li><a href="#">[BOX1]１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１</a></li>
4    <li><a href="#">[BOX2]２２２２２２</a></li>
5    <li><a href="#">[BOX3]３３３３３３３３３<br>
6     ３３３３３３<br>
7     ３３</a></li>
8    <li><a href="#">[BOX4]４４４４４４４４４４<br>４４４４４４</a></li>
9    <li><a href="#">[BOX5]５５５５<br>５５５５５</a></li>
10    <li><a href="#">[BOX6]６６６６６６６６６６６６６６６６６６６６６６６６６６６６６６６６</a></li>
11  </ul>
12</div>

css
1.fb ul,
2.fb li {
3  list-style: none;
4  margin: 0;
5  padding: 0;
6}
7
8.fb ul {
9  display: flex;
10  flex-wrap: wrap;
11  justify-content: space-between;
12  width: 100%;
13}
14
15.fb li {
16  display: flex;
17  align-items: center;
18  align-content: center;
19  margin: 0 0 15px;
20  background-color: #aaaaaa;
21  width: 30%;
22  text-align: center;
23}
24
25.fb li a {
26  width: 100%;
27  text-decoration: none;
28  padding: 20px;
29}
30
31.fb li a:hover {
32  background-color: #9B9B9B;
33}
34

###試したこと
display: table-cell;
を使いやりたいことの再現をしてみました。（htmlはちょっと広めにしてもらえるとありがたいです）
リンク内容

行動規範の内容に同意します

回答2件

JavaScript
1#fb ul,
2#fb li {
3  list-style: none;
4  margin: 0;
5  padding: 0;
6}
7
8#fb ul {
9  display: flex;
10  flex-wrap: wrap;
11  justify-content: space-between;
12  width: 100%;
13}
14
15#fb li {
16  display: flex;
17  align-items: center;
18  align-content: center;
19  margin: 0 0 15px;
20  background-color: #aaaaaa;
21  width: 30%;
22  text-align: center;
23  position: relative;/* ADD */
24  word-break: break-all;/* ADD */
25}
26
27#fb li a {
28  width: 100%;
29  text-decoration: none;
30  padding: 20px;
31  z-index: 0;/* ADD */
32}
33
34#fb li a::before {/* ADD */
35    bottom: 0;
36    content: "";
37    display: block;
38    left: 0;
39    position: absolute;
40    right: 0;
41    top: 0;
42	z-index: -1;
43}
44#fb li a:hover::before,/* ADD */
45#fb li a:hover {
46  background-color: #9B9B9B;
47}
48```**動くサンプル：**[https://jsfiddle.net/8Lwtyc62/1/](https://jsfiddle.net/8Lwtyc62/1/), [https://jsfiddle.net/8Lwtyc62/1/show/](https://jsfiddle.net/8Lwtyc62/1/show/)

投稿2017/03/03 20:02

kei344

総合スコア69400

TemmeiYamada

2017/03/04 04:20

ご回答ありがとうございます！ positionを使うやり方ですねー。しかしこれだと1列目と2列目の高さが揃わないですね。。全部高さを揃えたかったのです。すみません。

行動規範の内容に同意します

ベストアンサー

決め打ちで良ければ、こんな感じですか

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style media="screen">
    .fb ul, .fb li {
      list-style: none;
      margin: 0;
      padding: 0;
      }

      .fb ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      }

      .fb li {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 0 15px;
      background-color: #aaaaaa;
      width: 30%;
      text-align: center;
      height: : 5em;
      word-break: break-all;
      }

      .fb li a {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      height: 5em;
      padding: 20px;
      }

      .fb li a:hover {
        background-color: #9B9B9B;
        height: 5em;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div class="fb">
      <ul>
        <li><a href="#">[BOX1]１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１</a></li>
        <li><a href="#">[BOX2]２２２２２２</a></li>
        <li><a href="#">[BOX3]３３３３３３３３３<br>
         ３３３３３３<br>
         ３３</a></li>
        <li><a href="#">[BOX4]４４４４４４４４４４<br>４４４４４４</a></li>
        <li><a href="#">[BOX5]５５５５<br>５５５５５</a></li>
        <li><a href="#">[BOX6]６６６６６６６６６６６６６６６６６６６６６６６６６６６６６６６６</a></li>
      </ul>
    </div>
  </body>
</html>

投稿2017/03/03 11:01