CSS Flexboxの画像(BOX)を中央揃えしたい

画像の入ったボックスをPCでは3つ並んで4つ目で折り返し、タブレットでは2つ、SPでは1つにしたいです。
現在もそのようにはなっていますが、それらを囲んでいるfloatが中央にきてくれないです。
最初はfloatを用い作成してましたが、そのやり方でも中央に来ないので、Flexboxを見よう見まねでやってみたまでですが、他の方の質問を見ていると下記のようにしてうまく行くようでしたが、display: flex;を入れるとアイテム1が左側にアウトして消えてしまいます。

.float {
display: flex;
flex-direction: row;
justify-content: center;
}

※中央揃えにしたいですが、アイテム4はアイテム1の真下、アイテム5はアイテム2の真下に来るような、float内は左寄りのものにしたいです。
※image内ですが実際は300×200の画像を入れてます。

よろしくお願いいたします。

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5	<title>無題ドキュメント</title>
6<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
7<link href="style.css" rel="stylesheet" type="text/css">
8</head>
9
10<body>
11	<div class="content clearfix">
12		<h1>レスポンシブ</h1>
13        <div class="float">
14          <div class="item">
15            <h3>アイテム1</h3>
16            <img class="image" width="300px" height="200px" style="background:#F2C3C4" alt="画像">            
17            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
18          </div>
19          <div class="item">
20            <h3>アイテム2</h3>
21            <img class="image" width="300px" height="200px" style="background:#F2C3C4" alt="画像">
22            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
23          </div>
24          <div class="item">
25            <h3>アイテム3</h3>
26            <img class="image" width="300px" height="200px" style="background:#F2C3C4" alt="画像">            
27            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
28          </div>
29          <div class="item">
30            <h3>アイテム4</h3>
31            <img class="image" width="300px" height="200px" style="background:#F2C3C4" alt="画像">            
32            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
33          </div>
34          <div class="item">
35            <h3>アイテム5</h3>
36            <img class="image" width="300px" height="200px" style="background:#F2C3C4" alt="画像">            
37            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
38          </div>
39        </div>
40			</div>
41	</body>
42</html>
43

CSS
1@charset "utf-8";
2/* CSS Document */
3body {
4	width: 980px;
5}
6.float {
7  flex-direction: row;
8  justify-content: center;
9}
10.float > div {
11  width: 300px;
12  background: #ddd;
13  margin: 10px;
14  padding: 1em;
15}
16.image {
17	width: 100%;
18}
19.clearfix::after {
20  content: '';
21  display: block;
22  clear: both;
23}
24@media screen and (min-width: 660px){
25.float > div {
26    float: left;
27}
28p {
29  overflow: hidden;
30  text-overflow: ellipsis;
31  white-space: nowrap;
32}
33}
34@media screen and (min-width: 990px){
35  .float > div {
36    width: 28%;
37  }
38p {
39  overflow: hidden;
40  text-overflow: ellipsis;
41  white-space: nowrap;
42}
43}

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

回答1件

ベストアンサー

Flexboxでアイテムを中央揃え、かつ端数のアイテムは左寄せ

flex-wrap: wrap;でアイテムがはみ出る場合は折り返すようにします。
justify-content: center;を設定すると中央揃えになりますが、折り返された端数のアイテムも中央揃えになってしまいます。
対策として、before after疑似要素を追加して調節するというテクニックを使います。
疑似要素の幅をアイテムのブロックの同じに設定して、高さは設定せずに高さ＝0になるようにします。
これで左寄せにできます。端数のブロックない場合は疑似要素は折り返されますが高さが0なのでレイアウトに影響しません。
ただし4列以上の場合はこのテクニックでは完全に左寄せにならない場合が出てくるので3列以下限定です。

全体を中央揃え、かつ画面からはみ出さないようにする

ブロック要素の中央揃えはmargin: 0 auto;とします。
width:で幅を固定してしまうと画面からはみ出てしまいますので、max-width:で最大幅のみ設定します。

コード例

Flexboxを使うとメディアクエリを使わなくてもレスポンシブレイアウトにできます。

css
1body {
2  max-width: 1056px;
3  margin: 0 auto;
4}
5.float {
6  display: flex;
7  flex-wrap: wrap;
8  flex-direction: row;
9  justify-content: center;
10}
11.item {
12  width: 300px;
13  background: #ddd;
14  margin: 10px;
15  padding: 1em;
16}
17
18.float::before {
19  width: 300px;
20  margin: 0 10px;
21  padding: 0 1em;
22  content:"";
23  display: block;
24  order:1;
25}
26.float::after{
27  width: 300px;
28  margin: 0 10px;
29  padding: 0 1em;
30  content:"";
31  display: block;
32}
33
34.image {
35  width: 100%;
36}
37p {
38  overflow: hidden;
39  text-overflow: ellipsis;
40  white-space: nowrap;
41}

動作確認用サンプル

別案 CSS Grid を使うとシンプルに記述できる

Flexboxだと折り返しアイテムの左寄せに疑似要素を使う必要があるが、
CSS Grid だと auto-fillで簡単に左寄せ出来ます。

css
1body {
2  max-width: 1036px;
3  margin: 0 auto;
4}
5.float {
6  display: grid;
7  grid-template-columns: repeat(auto-fill, 332px);
8  justify-content: center;
9  grid-row-gap: 20px;
10  grid-column-gap: 20px;  
11}
12.item {
13  background: #ddd;
14  padding: 1em;
15}
16.image {
17  width: 100%;
18}
19p {
20  overflow: hidden;
21  text-overflow: ellipsis;
22  white-space: nowrap;
23}