flex box 基礎

6890 ワード
HTML CSS 初心者 flexbox HTML テキストリンク

レイアウトを整えるにはfloatやmargin:0 auto;を使っていましたが、Flexboxがとても便利だったので備忘録とて投稿します。

参考>https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

Flexboxの利点

flexboxとは、『簡単にいい感じのレイアウトにですることができるcssの仕組み』
floatやmargin:0 auto;と違った利点があります。

　　・複雑な内容を上下左右に簡単にレイアウト可能
　　・高さが消えず、clearfixが不要
　　・HTMLソースはそのままに、CSSのみで順序を入れ替え可能
　　・中央寄せ、均等分布などの画像ソフトで行なうような整列をHTML上で簡単に実現可能
　　・親や子のサイズが拡大縮小しても、その空間に応じて柔軟性高くレイアウトが可変する

などなど

Flexboxの注意点

　　・古いブラウザだと非対応
　　・IEでは最新版でも挙動がおかしい場合がある

FlexコンテナーとFlexアイテム

Flexレイアウトは大きく分けて2種類の要素に分かれており、それぞれ設定できるプロパティが異なります。

Flexコンテナー

Flexレイアウトを行うための親の箱です。下例で紹介しますがdisplay:flexと設定することでFlexコンテナーになります。

Flexアイテム

Flexコンテナー直下の要素は全て自動的にFlexアイテムとなります。
※Flexアイテム内に更にdivが含まれるなど、入れ子になっているアイテムはFlexアイテムとはなりません。

基本のflexレイアウト

html
<div class="flex">　/* flexコンテナー */
    <div>1</div>　/* flexアイテム */
    <div>2</div>　/* flexアイテム */
    <div>3</div>　/* flexアイテム */
</div>
css
.flex {
    background-color: grey;
    display:flex;
}
.flex > div {
    background-color: white;
    margin: 10px 10px;
}

すると
こんな感じ

これの親要素（.flex)のCSSにdisplay:flex;を追加します

css
.flex {
    background-color: grey;
    display:flex;/* 追加 */
}
.flex > div {
    background-color: white;
    margin: 10px 10px;
}


これだけで、簡単に横並びのレイアウトを作ることができました。

さらに追加します。

css
.flex {
    background-color: grey;
    display:flex;
    justify-content: center;/* 追加　*/
    align-items: center;/* 追加 */

}
.flex > div {
    ~省略〜
}

こんな感じで簡単にレイアウトを変更できます。

まとめ

便利なFlexboxのおかげでのおかげで思い通りのレイアウトが格段にやりやすくなりました。
この記事で紹介できなかったプロパティがまだまだ沢山あるので、また別記事で書きたいと思います。

ゲームでflexboxを学べるのでおすすめ
https://flexboxfroggy.com/#ja