広告

flex-boxでいい感じにボタンを揃える

WEB
この記事は約1分で読めます。

HTMLをコーディングしていて、flex-boxを使うとき、ちょっと苦労する点をクリアするための方法です。

例は、ボタンが3つ、ボタンとボタンの間隔が25px、最大幅950pxのときのものです。

通常なら、 justify-content: space-between; でOKじゃない?

確かに、そうなのですが、justify-content: space-between;で揃えようとすると、画面幅が小さくなったとき、メディアクエリを設定する必要があるので、面倒です。

そこで考えたのが、 transformを使って、ちょっとずらしてしまえ!

という力業です。

ポイントは、画面上の最大幅950px+ボタンの間隔25px=設定するmax-width975px

transform: translateX(12.5px); はボタン間隔の半分の値。

検索してもこの方法は出てこないので、もしかしたら、ダメかもしれません。

でも、IE11、Edge、Safari、Chrome、Firefoxでうまく動いてくれるので、大丈夫。

この記事を書いた人

企業向けWordPressテーマ作成、コーディングなどをしています。
2019年イベント専用サクサク動くWordPressテーマ(カスタム投稿が10、カスタムフィールドは約20,000)を作成しました。

よろず屋ありみちをフォローする
WEB
広告
よろず屋ありみちをフォローする
よろず屋ありみち