flex-wrap: wrapが効かない

Question

ボックスをこんな感じで、4つ並べたいと思っております。

現在のコードはこんな感じです。

<style>
.zigzagbox { /*四角箱*/
  width: 300px;
  height: 120px;
  background-color: #0454a4;
  margin: 0 30px;
  position: relative;
  display: flex;
    /*ここより下は文字を上下左右中央寄せにするためのコード*/
  align-items: center;
  justify-content: center;
  text-align:center
}
.zigzagbox::before { /*左の棘*/
  background: linear-gradient(315deg, #0454a4 50%, transparent 52%),
    linear-gradient(45deg, transparent 50%, #0454a4 52%);
  background-size: 30px 20px; /*右の数字を小さくするととんがりを小さくできる*/
  content: "";
  position: absolute;
  top: 0;
  left: -29px; /*棘部分の調整*/
  height: 100%;
  width: 30px;
}
.zigzagbox::after { /*右の棘*/
  background: linear-gradient(45deg, #0454a4 50%, transparent 52%),
    linear-gradient(315deg, transparent 50%, #0454a4 52%);
  background-size: 30px 20px;
  content: "";
  position: absolute;
  top: 0;
  right: -29px; /*棘部分の調整*/
  height: 100%;
  width: 30px;
}}</style>
<p></p>
<p></p>
<div class="zigzagbox"><b>Webああああああ</b></div><p></p> 

<div class="zigzagbox"><b>ああああああ</b></div><p></p>

<div class="zigzagbox"><b>ああああああ</b></div><p></p>

<div class="zigzagbox"><b>ああああああ</b></div><p></p>

各サイトを見てdisplay: flex;の下にflex-wrap: wrapを入れてみたのですが、何も変わりません。

https://teratail.com/questions/151134
この回答を参考にして、display: flex;を削除してflex-wrap: wrapを入れましたが、今度は文字の位置が上がってしまいました。

また、displayの下にflex-direction:row;とflex-wrap: wrapを入れてみましたが、これもダメでした。

flex-wrap: wrapを効かせるにはどうすればいいのでしょうか。
他のサイトやこのサイトの類似例を見ても解決しないので、質問しました。

Answer 1

display: flex;は親要素に設定する必要がありますので、zigzagbox をdivタグで囲んでそれに設定します。

<div class="flexbox">
  <div class="zigzagbox">
    <b>Web広告を始めたいけど
      何をすればいいのか
      わからない</b>
  </div>
  <div class="zigzagbox">
    <b>ああああああ</b>
  </div>

  <div class="zigzagbox">
    <b>ああああああ</b>
  </div>

  <div class="zigzagbox">
    <b>ああああああ</b>
  </div>
</div>

.flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 900px;
  margin: 0 auto; /* 中央寄せ */
}

.zigzagbox { /*四角箱*/
  width: 300px;
  height: 120px;
  background-color: #0454a4;
  margin: 10px 30px;
  position: relative;
  display: flex;
    /*ここより下は文字を上下左右中央寄せにするためのコード*/
  align-items: center;
  justify-content: center;
  text-align:center
}
.zigzagbox::before { /*左の棘*/
  background: linear-gradient(315deg, #0454a4 50%, transparent 52%),
    linear-gradient(45deg, transparent 50%, #0454a4 52%);
  background-size: 30px 20px; /*右の数字を小さくするととんがりを小さくできる*/
  content: "";
  position: absolute;
  top: 0;
  left: -29px; /*棘部分の調整*/
  height: 100%;
  width: 30px;
}
.zigzagbox::after { /*右の棘*/
  background: linear-gradient(45deg, #0454a4 50%, transparent 52%),
    linear-gradient(315deg, transparent 50%, #0454a4 52%);
  background-size: 30px 20px;
  content: "";
  position: absolute;
  top: 0;
  right: -29px; /*棘部分の調整*/
  height: 100%;
  width: 30px;
}

Codepenサンプル

Comments

[AmiI]

ありがとうございます。

<style>
.font_test {
color: #0854a4;
text-align: center;
font-size: 35px
}
</style>
<div class="font_test">
<font color=#0854a4>
<p><b>このようなお悩みをお持ちではありませんか？</b></p></font></div>
<style>
.flexbox {
display: flex;
flex-wrap: wrap;
width: 900px;
margin: 0 auto; /* 中央寄せ */
}

.zigzagbox { /*四角箱*/
width: 300px;
height: 120px;
background-color: #0454a4;
margin: 10px 30px;
position: relative;
display: flex;
/*ここより下は文字を上下左右中央寄せにするためのコード*/
align-items: center;
justify-content: center;
text-align:center
}
.zigzagbox::before { /*左の棘*/
background: linear-gradient(315deg, #0454a4 50%, transparent 52%),
linear-gradient(45deg, transparent 50%, #0454a4 52%);
background-size: 30px 20px; /*右の数字を小さくするととんがりを小さくできる*/
content: "";
position: absolute;
top: 0;
left: -29px; /*棘部分の調整*/
height: 100%;
width: 30px;
}
.zigzagbox::after { /*右の棘*/
background: linear-gradient(45deg, #0454a4 50%, transparent 52%),
linear-gradient(315deg, transparent 50%, #0454a4 52%);
background-size: 30px 20px;
content: "";
position: absolute;
top: 0;
right: -29px; /*棘部分の調整*/
height: 100%;
width: 30px;
}</style>
<p></p>
<p></p>

<div class="flexbox">
<div class="zigzagbox">
<b>あああああ
<br>ああああああ
<br><span style="font-size:2em;">わからない</span></b></div><p></p>
</div>

<div class="flexbox">
<div class="zigzagbox">
<b><span style="font-size:2em;">あああああ</span>の<span style="font-size:2em;">ああああああ</span>が
<br><span style="font-size:2em;">ああああああ</span></b></div><p></p>
</div>

<div class="flexbox">
<div class="zigzagbox">
<b><span style="font-size:2em;">あああああ</span>に<span style="font-size:2em;">ああああ</span>
<br><span style="font-size:2em;">ああああ</span>が<span style="font-size:2em;">ない</span></b></div><p></p>
</div>

<div class="flexbox">
<div class="zigzagbox">
<b>あああああ
<br><span style="font-size:1.5em;">ああああ
<br>ああああああ</span></b></div><p></p>
</div>

一応これでやってみたのですが、ボックスが真ん中寄せになるだけで、全く横並びになりません。

[soliste16]

４つのdivをまとめて１つのdiv(flexboxクラス付き)で囲わないと意味がないです。

[AmiI]

ありがとうございます。解決できました！