Flexboxに挑戦の9番目の記事で、Flexbox 非対応ブラウザで見た場合、回り込みが解除されて縦一列になってしまうという記事を書きました。 ブラウザは、基本的には、「知らないスタイル指定は無視する」という動作をするようなので、Flexでデザインしておいて、Flexに関する指定をそのまますべて削除したような見え方になる、と予想したわけですが。 実際には、ブラウザによって Flexbox への対応は様々で、中途半端に対応しているケースも多いようなので、見え方が実際にどうなるかは環境によって様々かも知れませんが。 そこでふと思いついたのは、 (1)知らないスタイルは無視される (2)後に適用したスタイルが有効になる というスタイルシートの特性を利用して、先にFloatを指定して、後でFlexの指定を行えば、仮にFlex非対応であっても、Floatが効いて回り込みが解除されずに済むのでは？ということ・・・ 試してみる。 （※動作環境はFirefox61, GoogleChrome68, IE11, Edge42です。）
前回作ったカレンダー
平成30年 9月
日
月
火
水
木
金
土
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
平成30年 9月
日
月
火
水
木
金
土
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
から、Flex の指定を削除してみると
平成30年 9月
日
月
火
水
木
金
土
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
縦並びになってしまいました。当たり前ですね。 そこで、Float:left; を追記してみると…
平成30年 9月
日
月
火
水
木
金
土
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
戻ったー＼(^o^)／ 元の Flex の指定を入れてあるものにも float を追記してみると
平成30年 9月
日
月
火
水
木
金
土
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
お、なんとか大丈夫そう(^^;) Floatの指定が子アイテムの方に入るので、若干心配だったのですが、なんとか大丈夫そうです(^^;) でも、親が子アイテムの整列方法の指定によっては、崩れるかもしれないなぁ・・・ 試してみよう。 幅を広げて、justify-cotent:flex-end; で右寄りにして・・・
平成30年 9月
日
月
火
水
木
金
土
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
配列が崩れてるけどテストなので無視して。 これに float:left を追加してみると・・・
平成30年 9月
日
月
火
水
木
金
土
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
どうやら、親要素にFlexが指定されていると、子要素にfloatが指定されても無視されるようですね。 考えてみたらこれも当たり前ですね、Floatの機能が生きていて、Flexboxの機能に予想外の影響を与えてしまったら困りますからね。 Flexboxが有効の場合はFloatは無視される、Flexboxが機能しない場合は有効になる、という事がFAのようなので、レイアウト崩れ対策にfloatを併記しておくのは、意外と良い手かも？ （まぁ、古いブラウザに対応する必要が、そもそも、もうないような気がしますので、あまり意味のないTIPSですね。。。）
コメント