質問編集履歴
7
タイトル変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
flexboxのレイアウトの組み方に
|
|
1
|
+
flexboxのレイアウトの組み方 -cms化を想定したものにしたい-
|
test
CHANGED
|
File without changes
|
6
追記しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -102,11 +102,11 @@
|
|
|
102
102
|
|
|
103
103
|
|
|
104
104
|
|
|
105
|
+
###●４カラムの場合の解決策も知りたいです。
|
|
106
|
+
|
|
105
107
|
|
|
106
108
|
|
|
107
109
|
追記の質問です。
|
|
108
|
-
|
|
109
|
-
●４カラムの場合の解決策も知りたいです。
|
|
110
110
|
|
|
111
111
|
|
|
112
112
|
|
|
@@ -127,7 +127,3 @@
|
|
|
127
127
|
※両サイドにビッチリとつけることが出来るのであれば、space-betweenにこだわりません。
|
|
128
128
|
|
|
129
129
|
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。（align-items: stretch;が便利なのでflexboxが好きです）
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
ソースを書きます。
|
5
質問の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
###実現させたい仕様
|
|
28
28
|
|
|
29
|
-
・画像が３倍数に収まれば綺麗な見栄えなのですが、３の倍数以外の画像数のときもあります
|
|
29
|
+
・画像が３倍数に収まれば綺麗な見栄えなのですが、３の倍数以外の画像数のときもあります、そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
|
|
30
30
|
|
|
31
31
|
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
|
|
32
32
|
|
|
@@ -109,3 +109,25 @@
|
|
|
109
109
|
●４カラムの場合の解決策も知りたいです。
|
|
110
110
|
|
|
111
111
|
|
|
112
|
+
|
|
113
|
+
###実現させたい仕様
|
|
114
|
+
|
|
115
|
+
・画像が4の倍数または4n+1に収まれば綺麗な見栄えなのですが、今のままではきれいに収まらない画像数のときもあります、
|
|
116
|
+
|
|
117
|
+
例
|
|
118
|
+
|
|
119
|
+
パターン① 4n+3の場合
|
|
120
|
+
|
|
121
|
+
パターン② 4n+2の場合
|
|
122
|
+
|
|
123
|
+
そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
|
|
124
|
+
|
|
125
|
+
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
|
|
126
|
+
|
|
127
|
+
※両サイドにビッチリとつけることが出来るのであれば、space-betweenにこだわりません。
|
|
128
|
+
|
|
129
|
+
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。（align-items: stretch;が便利なのでflexboxが好きです）
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
ソースを書きます。
|
4
質問の追記と画像の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -14,13 +14,13 @@
|
|
|
14
14
|
|
|
15
15
|
実現したい完成画像を用意しました。
|
|
16
16
|
|
|
17
|
-
|
|
18
17
|
|
|
19
18
|
|
|
19
|
+
●３カラムの場合
|
|
20
|
+
|
|
21
|
+
|
|
20
22
|
|
|
21
23
|
|
|
22
|
-
|
|
23
|
-
![やりたいレイアウト]!
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
@@ -99,3 +99,13 @@
|
|
|
99
99
|
|
|
100
100
|
|
|
101
101
|
```
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
追記の質問です。
|
|
108
|
+
|
|
109
|
+
●４カラムの場合の解決策も知りたいです。
|
|
110
|
+
|
|
111
|
+
|
3
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|
2
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
###実現させたい仕様
|
|
28
28
|
|
|
29
|
-
・画像が３倍数に収まれば綺麗な見栄えなのですが、３の倍数以外の画像数のときもあります、そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
|
|
29
|
+
・画像が３倍数に収まれば綺麗な見栄えなのですが、３の倍数以外の画像数のときもあります(画像数が7枚のときや8枚のときなど)、そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
|
|
30
30
|
|
|
31
31
|
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
|
|
32
32
|
|
1
文字修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
そんな中でこうなれば良いのになっと思っている質問がございますので
|
|
10
10
|
|
|
11
|
-
どなたかお答えいただければ幸いでございます。
|
|
11
|
+
どなた様かお答えいただければ幸いでございます。
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|