Flexboxを調子に乗って使いまくってたらChromeで思いっきりはみだしていた件

えー、タイトルのまんまで全くお恥ずかしい限りですが…見事なまでにはみだしチャンピオン(古)でした。とりあえずこれはすぐに何とかせねばなるまい…という事で、早速何とかしてみました。

スポンサーリンク

おかしいのはChromeではなくFirefox?

個人的にはFirefoxの仕様の方が有り難いんですが、widthの値が無視されるという事自体がおかしいと言われれば確かにそうかもしれません。何れにしてもブラウザによってレイアウトが大崩れしてしまうのは避けたいので、ここは対応策を考えなければならないようです。

というか既にこんな風に崩れちゃってますからね…

Display: flexがchromeではカラムから飛び出してる図

ちなみに元を辿るとこちらのエントリー内容がベースになっていますので、先に目を通していただくと「おまえは何を言っているんだ」という事にならないかもしれません。

なぜその事に気付けなかったのか

私が初めてFlexboxに挑戦したのは確か3カラムのフッターを作った時だったと思いますが

その時はそれぞれwidthを指定していたので問題が無かったようです。このエントリーを書いた事でFlexboxって超便利!とばかりに好んで使うようになって、FirefoxとChromeでの違いを知らないまま現在に至った為にこのような事になってしまったと、そういうわけです。

というか、今ふと気付いたんですけど

FirefoxとFlexboxって字面が似てて結構紛らわしいですネ!

それでは対応に入りましょう

まずはwidthを%で指定するスタイルでいってみたいと思いますが、画像が2枚の場合と3枚の場合で分ける必要がありそうです。画像4枚以上の横並びはさすがに使う事が無さそうなので、今回は無しの方向で考えてみました。

画像が2枚の場合

画像と画像の間隔を2%、横幅を49%でちょうど100%ですね。

49% + 2% + 49% = 100%

CSSはこんな感じかと。

.img-flex {
	display: flex;
	display: -webkit-flex;
}

.img-flex img {
	width: 49%;
}

.img-flex img {
	margin-right: 2%;
}

.img-flex img:last-child {
	margin-right: 0;
}

さて、どうでしょう…

直ったかと思ったらheightがそのままだった図

oh…高さを直すの忘れてマシタ…ちょっとわかりにくいですが、よく見ると画像が縦に少し伸びちゃってます。


.img-flex img {
	width: 49%;
	height: 49%;
}

高さも同じ設定で良いでしょう。

とりあえず正常に見えるようになった図

何とかなったようですね。

画像が3枚の場合

画像が3枚になっても基本的には同じです。

Display: flexがchromeではカラムから飛び出してる図 画像3枚の場合

2枚の時と同様に画像の間隔を2%にすると横幅は32%になるでしょうか。

32% + 2% + 32% + 2% + 32% = 100%

画像2枚の時のCSSと一緒にするとこんな感じになります。

.img-flex ,
.img-flex3 {
	display: flex;
	display: -webkit-flex;
}

.img-flex img {
	width: 49%;
	height: 49%;
}

.img-flex3 img {
	width: 32%;
	height: 32%;
}

.img-flex img ,
.img-flex3 img {
	margin-right: 2%;
}

.img-flex img:last-child ,
.img-flex3 img:last-child {
	margin-right: 0;
}

さて、どうでしょう…

とりあえず正常に見えるようになった図 画像3枚版

一応これで画像がカラムをみょーんと突き破る事は無くなった…と思います。

calcを使った書き方に挑戦してみる

考えようによってはこれも良い機会ですので、以前から使ってみたかったcalcを使ったパターンもついでに試してみたいと思います。

画像が2枚の場合

四則演算の優先順位があるので必要に応じて()を使う必要があります。まず全体の幅から間隔分の10pxを引いて、その結果を2で割る事で画像1枚当たりの横幅を求めます。

( 100% - 10px ) / 2

先ほどの%指定の時と違う部分だけですが

.img-flex img {
	width: calc((100% - 10px) / 2);
	width: -webkit-calc((100% - 10px) / 2);
	height: calc(100% / 2);
	height: -webkit-calc(100% / 2);
}

.img-flex img {
	margin-right: 10px;
}

高さは単純に2で割っているので厳密に言えば縦横比が微妙に正確では無いですが、そこまで拘わらなくても良いだろうという事でここは妥協したいと思います。

画像が3枚の場合

これも2枚の場合と同様に

( 100% - 20px ) / 3
.img-flex3 img {
	width: calc((100% - 20px) / 3);
	width: -webkit-calc((100% - 20px) / 3);
	height: calc(100% / 3);
	height: -webkit-calc(100% / 3);
}

こんな感じになります。

要素内のimgタグの数で割るという計算さえ出来れば1つにまとめられそうな気もしますが、さすがにCSSだけでそこまでやろうとすると厳しいようです。

せっかくなのでcalc版を採用してみました

現在、当サイトに反映したのはcalcを使った方のCSSになります。

.img-flex ,
.img-flex3 {
	display: flex;
	display: -webkit-flex;
}

.img-flex img {
	width: calc((100% - 10px) / 2);
	width: -webkit-calc((100% - 10px) / 2);
	height: calc(100% / 2);
	height: -webkit-calc(100% / 2);
}

.img-flex3 img {
	width: calc((100% - 20px) / 3);
	width: -webkit-calc((100% - 20px) / 3);
	height: calc(100% / 3);
	height: -webkit-calc(100% / 3);
}

.img-flex img ,
.img-flex3 img {
	margin-right: 10px;
}

.img-flex img:last-child ,
.img-flex3 img:last-child {
	margin-right: 0;
}

画像を2枚で使う場合がほとんどだったので、出来るだけCSSの修正だけで済むようにクラスセレクタ名はimg-flexのままにして、3枚の場合はimg-flex3を使うようにしました。

最後の仕上げは手作業で

さて、画像が2枚の場合はCSSだけで対応は済んでいるので、問題は画像が3枚の場合だけという事になります。

修正対応はSearch Regexで

今回のようなケースでは一括置換は出来ませんので検索機能だけを使います。このSearch Regexは非常に便利なプラグインですので、どこかでちゃんと紹介したいとは思っていますが今回はサラっと流す事にします。

Search Regexでセレクタを使っているエントリーを探して修正

Search Regexを使った修正の手順

  • 投稿をキーワード「img-flex」で検索
  • 検索結果からエントリーをviewで開いて内容を確認
  • 画像3枚の横並びが無ければ次の投稿へ
  • 画像3枚の横並びがあればimg-flexをimg-flex3に変更

検索して記事を絞り込んだ後は全て手作業になりますが、全てのエントリーを目視で確認していくよりは遥かに効率が良くて助かりました。

人は失敗から学ぶものです

ブラウザごとの違いにはIEとNetscape Navigatorの頃から悩まされっぱなしですが、ここまで盛大にやらかしたのは本当に久しぶりです。いや、もしかしたら自分では気付いてないだけでまだあるのかもしれませんけどね?

何れにしても今後CSS絡みの記事を書く際には、最低でもFirefox・Chrome・OperaかVivaldiくらいは表示の確認をしなくてはいけないとあらためて反省いたしました。もちろんモバイルから見た場合も同様ですが、Safariだけは何かあったらすいませんという事でご了承いただきたい…かな?

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク
トップへ戻る