Flexbox CSS2

Overview

• メリット
  • レスポンシブデザイン
  • 可変ウィンドウ幅、可変要素数でも、CSSだけでフレキシブルに対応。
• デメリット
  • 古いブラウザは対象外。

Flexbox Container

• 親要素

.categories_list{
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;

    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;

    -webkit-justify-content: space-between;
    justify-content: space-between;
}

flex-grow

• FlexBox(Child) item
• Flexアイテムの「伸びる」

.categories_list > li.cat-item {
    flex-grow: 1;
}

Media Query

@media screen and (min-width: 25em) {
    .categories_list{
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    }
}
@media screen and (min-width: 40em) {
    .categories_list{
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    }
}
@media screen and (min-width: 60em) {
    .categories_list{
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

参考サイト

• CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG
• css3のflexboxを使うとすごい簡単になるレイアウトを試してみた | スターフィールド株式会社
• CSS3 Flexbox の各プロパティの使い方を詳しく解説 | コリス