質問編集履歴
7
タイトル変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
flexboxのレイアウトの組み方に
|
|
1
|
+
flexboxのレイアウトの組み方 -cms化を想定したものにしたい-
|
body
CHANGED
|
File without changes
|
6
追記しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
+
###●４カラムの場合の解決策も知りたいです。
|
|
53
54
|
|
|
54
55
|
追記の質問です。
|
|
55
|
-
●４カラムの場合の解決策も知りたいです。
|
|
56
56
|
|
|
57
57
|
###実現させたい仕様
|
|
58
58
|
・画像が4の倍数または4n+1に収まれば綺麗な見栄えなのですが、今のままではきれいに収まらない画像数のときもあります、
|
|
@@ -62,6 +62,4 @@
|
|
|
62
62
|
そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
|
|
63
63
|
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
|
|
64
64
|
※両サイドにビッチリとつけることが出来るのであれば、space-betweenにこだわりません。
|
|
65
|
-
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。（align-items: stretch;が便利なのでflexboxが好きです）
|
|
65
|
+
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。（align-items: stretch;が便利なのでflexboxが好きです）
|
|
66
|
-
|
|
67
|
-
ソースを書きます。
|
5
質問の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
###実現させたい仕様
|
|
15
|
-
・画像が３倍数に収まれば綺麗な見栄えなのですが、３の倍数以外の画像数のときもあります
|
|
15
|
+
・画像が３倍数に収まれば綺麗な見栄えなのですが、３の倍数以外の画像数のときもあります、そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
|
|
16
16
|
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
|
|
17
17
|
※両サイドにビッチリとつけることが出来るのであれば、space-betweenにこだわりません。
|
|
18
18
|
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。
|
|
@@ -53,4 +53,15 @@
|
|
|
53
53
|
|
|
54
54
|
追記の質問です。
|
|
55
55
|
●４カラムの場合の解決策も知りたいです。
|
|
56
|
-
|
|
56
|
+
|
|
57
|
+
###実現させたい仕様
|
|
58
|
+
・画像が4の倍数または4n+1に収まれば綺麗な見栄えなのですが、今のままではきれいに収まらない画像数のときもあります、
|
|
59
|
+
例
|
|
60
|
+
パターン① 4n+3の場合
|
|
61
|
+
パターン② 4n+2の場合
|
|
62
|
+
そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
|
|
63
|
+
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
|
|
64
|
+
※両サイドにビッチリとつけることが出来るのであれば、space-betweenにこだわりません。
|
|
65
|
+
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。（align-items: stretch;が便利なのでflexboxが好きです）
|
|
66
|
+
|
|
67
|
+
ソースを書きます。
|
4
質問の追記と画像の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
どなた様かお答えいただければ幸いでございます。
|
|
7
7
|
|
|
8
8
|
実現したい完成画像を用意しました。
|
|
9
|
-
|
|
10
9
|
|
|
10
|
+
●３カラムの場合
|
|
11
|
+
|
|
11
12
|
|
|
12
|
-
![やりたいレイアウト]!
|
|
13
13
|
|
|
14
14
|
###実現させたい仕様
|
|
15
15
|
・画像が３倍数に収まれば綺麗な見栄えなのですが、３の倍数以外の画像数のときもあります(画像数が7枚のときや8枚のときなど)、そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
|
|
@@ -48,4 +48,9 @@
|
|
|
48
48
|
margin-bottom: 30px;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
```
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
追記の質問です。
|
|
55
|
+
●４カラムの場合の解決策も知りたいです。
|
|
56
|
+
|
3
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
2
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
![やりたいレイアウト]!
|
|
13
13
|
|
|
14
14
|
###実現させたい仕様
|
|
15
|
-
・画像が３倍数に収まれば綺麗な見栄えなのですが、３の倍数以外の画像数のときもあります、そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
|
|
15
|
+
・画像が３倍数に収まれば綺麗な見栄えなのですが、３の倍数以外の画像数のときもあります(画像数が7枚のときや8枚のときなど)、そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
|
|
16
16
|
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
|
|
17
17
|
※両サイドにビッチリとつけることが出来るのであれば、space-betweenにこだわりません。
|
|
18
18
|
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。
|
1
文字修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
高さを揃えるなど大変便利なcssと思っております。
|
|
4
4
|
|
|
5
5
|
そんな中でこうなれば良いのになっと思っている質問がございますので
|
|
6
|
-
どなたかお答えいただければ幸いでございます。
|
|
6
|
+
どなた様かお答えいただければ幸いでございます。
|
|
7
7
|
|
|
8
8
|
実現したい完成画像を用意しました。
|
|
9
9
|
|