Flexboxで右寄せやスクロール

どうも、もりもりです。

いまさらですが、tableタグはもう卒業してFlexboxでレイアウトを組むことを心に誓いました。 今まで携わってきたASP.NETでの開発は既存システムの改修ばかりでブラウザもIEがターゲット。。。 tableタグも多用されており見るに耐えない感じに。。。 今回は新規開発でブラウザがChromeということもあり、好きなように作ることができるので ちょっとかじったことのあるFlexboxで今風な感じに。

<目次>
■ はじめに
■ 一部を右寄せ
■ 一定幅を超えるとスクロール
■ さいごに

はじめに

Flexboxについては情報がたくさんあるのでそこは割愛します。 使っていてちょっとこれどうしたらええんやろ？というのがあったので ２つほど紹介します。

一部を右寄せ

まずは１つ目。横に並べたコンテナ内のアイテムで最後のアイテムだけ右に寄せたい。

See the Pen flexbox-right-justified by Y Mori (@ymdevx3) on CodePen.

item1_3にmargin-left: auto;をセットするだけ。

一定幅を超えるとスクロール

次にコンテナ内のあるアイテムに対し、一定の幅を超えるとスクロールさせたい。

See the Pen flexbox-scroll by Y Mori (@ymdevx3) on CodePen.

item2_1にflex: 0 0 auto;をセットし、 item2_1を入れるcontainer２_1に対して overflow-x: auto;とmax-width: 60%;をセットする。

あとはAddボタンをポチポチとクリックしてもらえればアイテムが増えていき、途中から幅が一定になってスクロールできるようになります。

さいごに

Flexboxって簡単にレイアウト組めちゃうのでいいですね。 ただVisualStudioのデザインでレイアウトを確認してもFlexboxのスタイルは効いてはくれないのでブラウザでの確認が必要です。 デスクトップアプリの開発ばかりやってたのでWebはそんなに強くなはなく、Webアプリのデザインに苦戦中ですが 新しいことに挑戦するのって楽しいですね。 CSS Gridやコンテナクエリなども使いこなしていきたいと思います。

以上、もりもりでした。