レスポンシブデザインでのdisplay: flex;で自由にカードを落としたい

HTMLのレスポンシブデザインでのカードの落とし方について質問です。
CodePenにもソースを上げているのですが、レスポンシブ（768px以下になった際）に下記のことを実装したいです。

・中くらいのカードを下段に落としたい
HTMLで中くらいのカードの親要素として新たにdivを囲ったりして落とすことは可能ですが、
現在のマークアップのまま落としたいです。CSSだけで調整することは可能でしょうか？

・小さなカード(ズレる)を前6枚の小さなカードと同じく左揃えしたい
.card_wrapにjustify-content: center;をかけているので、要素がまるまると中央に寄っていますが、
小さなカード群は中央揃えの状態で、カード同士で左揃えで統一したいです。
現在小さなカード(ズレる)だけ左側にボコっと出てしまっている状態なので、それを直したいです。

CodePen
https://codepen.io/yutas01/pen/abdybaB

ソース

html
1<div class="contents">
2  <div class="section section-card">
3    <h1>カードリスト</h1>
4    <ul class="card_wrap">
5      <li class="card_items card_items-sm">
6        <div class="card_inner"> 小さなカード </div>
7      </li>
8      <li class="card_items card_items-sm">
9        <div class="card_inner"> 小さなカード </div>
10      </li>
11      <li class="card_items card_items-sm">
12        <div class="card_inner"> 小さなカード </div>
13      </li>
14      <li class="card_items card_items-sm">
15        <div class="card_inner"> 小さなカード </div>
16      </li>
17      <li class="card_items card_items-sm">
18        <div class="card_inner"> 小さなカード </div>
19      </li>
20      <li class="card_items card_items-sm">
21        <div class="card_inner"> 小さなカード </div>
22      </li>
23      <li class="card_items card_items-sm">
24        <div class="card_inner"> 小さなカード(ズレる) </div>
25      </li>
26      <li class="card_items card_items-md">
27        <div class="card_inner"> 中くらいなカード </div>
28      </li>
29      <li class="card_items card_items-md">
30        <div class="card_inner"> 中くらいなカード </div>
31      </li>
32      <li class="card_items card_items-lg">
33        <div class="card_inner"> 大きなカード </div>
34      </li>
35      <li class="card_items card_items-lg">
36        <div class="card_inner"> 大きなカード </div>
37      </li>
38      <li class="card_items card_items-unique">
39        <div class="card_inner"> 中途半端なサイズを右寄せ </div>
40      </li>
41    </ul>
42  </div>
43</div>

scss
1//変数定義
2$sp: 'screen and (max-width: 768px)';
3$winW: 640;
4
5//reset
6h1, ul, li {
7  margin: 0;
8  padding: 0;
9  border: 0;
10  outline: 0;
11}
12
13li {
14  list-style-type: none;
15}
16
17*, *:before, *:after {
18  box-sizing: border-box;
19  -webkit-box-sizing: border-box;
20}
21
22.contents {
23  width: 1100px;
24  margin: auto;
25  padding-top: 48px;
26  @media #{$sp} {
27    width: 100%;
28    padding-left: 10px;
29    padding-right: 10px;
30    padding-top: 20px;
31  }
32}
33
34.section {
35  padding: 20px;
36  border: 5px solid #afd1ff;
37  border-radius: 5px;
38  h1 {
39    font-size: 18px;
40    border-bottom: 1px solid #999;
41  }
42}
43
44.section-card {
45  h1 {
46    padding-bottom: 4px;
47    margin-bottom: 16px;
48  }
49}
50
51.section+.section {
52  margin-top: 40px;
53  @media #{$sp} {
54    margin-top: 24px;
55  }
56}
57
58.card_wrap {
59  display: flex;
60  flex-wrap: wrap;
61  flex-shrink: 0;
62  margin: -10px;
63  @media #{$sp} {
64    justify-content: center;
65  }
66}
67
68.card_items {
69  width: 100%;
70  padding: 10px;
71  @media #{$sp} {
72    padding: 5px;
73  }
74}
75
76.card_items-sm {
77  flex-shrink: 0;
78  flex-basis: 25%;
79  @media #{$sp} {
80    min-width: 200px;
81    flex-basis: calc(100% / 3);
82  }
83  .card_inner {
84    background: #E6F4FD;
85  }
86}
87
88.card_items-md {
89  flex-shrink: 0;
90  flex-basis: 50%;
91  .card_inner {
92    background: #FCEBF3;
93  }
94}
95
96.card_items-lg {
97  flex-shrink: 0;
98  flex-basis: 100%;
99  .card_inner {
100    background: #FFFDE6;
101  }
102}
103
104.card_items-unique {
105  flex-shrink: 0;
106  flex-basis: 70%;
107  margin-left: auto;
108  .card_inner {
109    background: #eeedff;
110  }
111}
112
113.card_inner {
114  border: 1px solid #9d9d9d;
115  padding: 10px;
116}

宜しくお願い致します。

Lhankor_Mhy

2020/06/27 01:40

display: flex; は絶対条件ですか？

nyoro

2020/06/27 04:37

絶対条件というわけではありませんが、今回はflexを使用したCSSの記述にしているので、なるべく大きな改変はしたくないと思っています。floatやpositionなどを使用した別解もありますが、結局保守性や拡張性が大きく落ちてしまうと意味がないと思っているので、現在のソースに追記する感じでうまく整えられないかなと思い質問させていただきました。

Lhankor_Mhy

2020/06/27 04:57

なるほど、display: grid なら、と思っていたのですが難しいのですね。では、他の回答者をお待ちください。

nyoro

2020/06/29 01:00

このような場合は、やはりgridで組んでしまうのが一番スタンダードなやり方なのですかね。。IEに対応できれば是非使いたいです。ありがとうございます。

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

回答1件

ベストアンサー

order書いてメディアクエリでゴリプッシュ
ずれるの後ろにbefore持ってきてflex埋めて「中くらいのカード」を下段に落とす。ついでに「小さなカード」の幅１つ分または２つ分にして左を合わせる。

scss
1.card_items-sm {
2  order : 1;
3}
4.card_items-md {
5  order : 2;
6}
7.card_items-lg {
8  order : 3;
9}
10.card_items-unique {
11  order : 4;
12}
13
14.card_wrap::before {
15    content: '';
16    display: block;
17    height: 0;
18    order : 2;
19    flex-shrink: 0;
20
21    @media screen and (max-width:768px) { 
22      min-width: 200px;
23      flex-basis: calc(100% * 2 / 3);
24    }
25    
26    @media screen and (max-width:682px) { 
27      flex-basis: 25%;
28    }
29}

投稿2020/06/27 06:31

sousuke

総合スコア3830

nyoro

2020/06/29 00:58

すごいです。。かなりハック的な使い方ですがこれだと実装できるのですね。勉強になりました。ありがとうございます。

sousuke

2020/06/29 06:47 編集

小さいカードの列数が増えるとメディアクエリもその分増えますね〜。ハック的な要素は大いにありますが「justifiy-content center 左寄せ」とかで検索すると普通に出てきますよ。逆にbefore使わなくてもdisplay:noneの子要素置いてメディアクエリでblockにしても原理は同じですし（今回はhtmlを変えたくないとのことでbeforeを使いました）

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