fotodeo

写真を横並びにするだとか、メニューボタンを横並びにするなど、の方法として
リストに横並びにしたい物を入れてインラインブロックにして横並びにしていました。

-code-

<style type="text/css">
　　#content0{max-width: 500px; background: #fee;}
    #content0 li{display: inline-block;background: #bbb;}
</style>

<ul id=content0>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

考え方としては4までの数字を横並びにするのはこんな感じです。ちょっとわかりやすいように最大幅500ｐｘで要素一つ一つに背景色を入れています。

-実行結果-

• 1
• 2
• 3
• 4

飾らなければこのような感じです。これを右寄せ、中央寄せ、折り返しなどしようとすると色々と作業をしないといけません。最悪javaの出番となってしまいます。
レイアウトを作る時に私はまだこちらの古いやり方のが慣れているので複雑なものを組むには楽なのですが、美しくないし面倒な方法なのです。

前置きが長すぎた∑(°Д°；≡°Д°；)

この方法とは別のflexboxとは上記の余白や並べ方などのパラメータなど、数値をあまり考えずに組む事が出来ます。

inlineboxをflexboxに書き換えてみる

-code-

<style type="text/css">
    #content2{max-width: 490px;margin:5px;padding:0; display: flex;list-style: none;background: #fee;}
    #content2 li{background: #bbb;}
</style>

<ul id=content2>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

変わったところと言えば子要素に付けていたinline-blockが無くなって親のプロパティにdisplay:flexが付きました。
flexとは子要素に対して横並びにする事が出来ます。

並び方を変えてみる

-code-

<style type="text/css">
    .content_flex{max-width: 490px;margin:5px;padding:0; display: flex;list-style: none;background: #fee;}
    .narabi1{justify-content: flex-start;}
    .narabi2{justify-content: flex-end;}
    .narabi3{justify-content: center;}
    .content_flex li{background: #bbb;}
</style>

<ul class="content_flex narabi1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<ul class="content_flex narabi2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<ul class="content_flex narabi3">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

-実行結果-

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

3パターン一気に表示しています。
並び方を変えるには「justify-content」を使用します。

パラメーターはそれぞれ

• flex-start　左詰め
• flex-end　　右詰め
• center　　　中央寄せ

となります。

それって便利なの？

上記サンプルだけでは全然便利なのか分かりませんね。なのでどういったことが出来るのかもう少しご紹介。

• flex-direction:row-reverse；　並ぶ順番を後ろからにします。
• flex-wrap:wrap　　親の幅に合わせて折り返します。初期値はno-wrapで収まるように自動縮小される。

まとめ

なれると超簡単にコンテンツを並べていく事が出来ます。そして上記のワードで検索してみるともっと深くflexを知る事が出来るでしょう。
後はいつも通り探してみてください。すべて教えられる。コピペのみで済ますより、やってみてこそ知力が上がりエンジニアとしての力が上がる事でしょう。
「私の記事でこうゆう事が出来るんだ」と思ってもらえれば幸いです。