display-flex、flexbox、boxのあたりのコピペで使えるサンプル

cssでは横並びにするのにflexboxという要素があります。
普段は、floatや、display: inline-block;で横並びにしていましたが、スマートフォンなど、flexboxが対応しているブラウザであれば、とても便利に利用できます。

細かい仕様に関しては、こちらの記事にとても綺麗にまとまっています。
flexboxの旧仕様、改定仕様、現行仕様の一覧
記事を参考に、利用頻度が高い使い方について、さくっとコピペで利用できるようにソースを作ってみました。

まずは基本となるhtml

並べたい要素を箱で囲っておきます。ここでは3つを横に並べてみたいと思います。

囲む箱にdisplayのstayleをあてる

箱に対して、約束事みたいな感じです。
Android2.3以前の端末にも対応する形です。

箱の中の子要素にはflexのstyleをあてる

箱の中身にstyleを指定します。

上記のcssが基本的な形です。
3つの要素が等間隔にバランスよく並びます。
ブラウザのウィンドウの横幅を変更すると、それに合わせて3つが等間隔で短くなります。

箱の中の子要素のうち、一番左のdivだけは、常に横幅を固定したい場合

アイコンであったり、左端に固定しておきたい場合があります。
その場合は、箱の中の子要素にはこちらのfrexのstykeを入れます。

適応させてみると、1つ目のdivだけが、固定されるのがわかります。