レイアウトを変えないで可変したい

Question

https://jsfiddle.net/2o1n1nrr/2/
上記に簡易的ですが作りました。

レスポンシブのスマホを想定しています。
上記のようなレイアウト（上から要素が２つ、３つ、２つ）を
崩さないで小さくすることはできますでしょうか？

現状ですと小さくすると３段だったのもが４段、５段と増えてしまい崩れてしまいます。

ご教示お願いします。

Comments

[x_x]

小さくした場合にどうなるのが理想なのでしょうか？

[MeB]

このまま上から要素が２つ、３つ、２つ（三段になっている状態）並んだ状態で小さくしたいです。伝わりますでしょうか？

[sousuke]

文字折り返しなどは？フォントサイズを小さくするんですか？

[MeB]

そうなるかとおもいます…

[x_x]

フォントサイズも限界があるので(Chromeのデフォルトは10px)、その際は消えていくのでしょうか

Answer 1

常に三段にしたいなら親を３つにしたらいいと思いますが、どうでしょうか？

Comments

[MeB]

それもやってみましたが、幅を固定しないとどうしても要素が下に行ってしまいます。

Answer 2

コレではダメでしょうか？

<div class="industry-type sp-only">
  <p class="col2">aaaaaaaaaaaaaaaa</p>
  <p class="col2">bbbbbbbbbbbbbbb</p>
  <p class="col3">cccccccc</p>
  <p class="col3">dddddddddd</p>
  <p class="col3">eeeeeeeeee</p>
  <p class="col2">ffffffffffffffffffffffffff</p>
  <p class="col2">ggggggggggg</p>
</div>

.industry-type {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.col2 {width:calc((100% - 10px) / 2 - 40px);}
.col3 {width:calc((100% - 20px) / 3 - 40px);}
.industry-type p {
	background: #8698b4;
	padding: 15px 20px;
	float: left;
	font-size: 20px;
	color: #fff;
	border-radius: 10px;
	margin-top: 0;
}

CodePen 参考
https://codepen.io/RaRukAnA/pen/eMXzzR/

Answer 3

flexで３段組むしかないと思います。