読者です 読者をやめる 読者になる 読者になる

エンターテイメント!!

遊戯王好きのJavaエンジニアのブログ。バーニングソウルを会得する特訓中。

CSS3のFlexboxの基礎知識

勉強 UI/UX HTML/CSS

Flexboxとは?

Flexboxとは、柔軟なボックスレイアウトを可能にするCSSの仕様のこと。
正式名称は、「CSS Flexible Box Layout Module」

使い方

cssdisplay: flex;を設定するだけ。
以下、サンプル。

<html>
    <head>
       <title></title>
       <link rel="stylesheet" type="text/css" href="./test.css">
   </head>
    <body>
        <nav>
            <ul class="main-nav">
                <li><a href="#" class="logo">Logo</a></li>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
            </ul>
        </nav>
    </body>
</html>
.main-nav a {
  margin: 10px;
  border-radius: 5px;
  background: #60B99A;
  color: #fff;
  display: block;
  padding: 15px;
  text-decoration: none;
}
.main-nav .logo {
  background: #4584b1;
}

.main-nav {
    display: flex;
    list-style:none;
}

こうすると<li>タグのやつが均等配置されるはず!

配置

CSSの定義を変更すると配置方法が変わる。 実際の利用法としては、定義をしておいて、JavaScriptで属性を動的に変えて並び替える。
そうすると勝手にレイアウトが変わる。
今までだともっと細かく設定をしてやらないと行けなかったのが、簡単にできるようになる。

折り返し

flex-directionで指定する。
- row : デフォルト値。左から右へ順番に並べる。 - column : 上から下に順番に並べる。 - row-reverse : rowの逆に並べる。 - column-reverse : columnの逆順に並べる。

繰り返し

flex-wrapで設定する。
単一行/複数行を設定する。 - nowrap : 初期値。折り返しなしの単一行。 - warp : 折り返しありの複数行。 - warp-reverse : 折り返しありで、折り返した場合、次の行が上に来る。

横方向

justify-contentで指定する。 flex-direction > justify-contentの関係。
flex-directionをベースに並び替えを行う。
矛盾する配置はflex-directionが優先される。
例えば、flex-direction:column, justify-content:flex-endなら、上から下に要素が並ぶ。

  • flex-start : デフォルト値。右寄せ
  • flex-end : 左寄せ
  • center : 中央揃え
  • space-between : 均等に間隔を開けて配置する。
  • space-around : space-betweenとほぼ同じ。左右の端にも間隔を開ける。

縦方向

align-itemsで設定する。
justify-content > align-itemsの関係。
justify-contentをベースに並び替えを行う。 - flex-start : デフォルト値。上揃え。 - flex-end : 下揃え。
- center : 中央揃え - baseline : ベースラインに揃える。考え方がよくわからん!centerとほぼ同じでは? - stretch : 高さが設定されていない場合、要素内で最大の高さに合わせる。

行の揃え方

align-contentで指定する。
flex-warp : nowrap 以外を設定した場合に有効になる。 justify-content > align-contentの関係。
- flex-start : 横配置→上揃え。縦配置→左揃え。 - flex-end : 横配置→下揃え。縦配置→右揃え。 - flex-center : 中央揃え。 - space-between : 行の上下に間隔を開けて配置。 - space-around : 行の上下に間隔を開けて配置。端にも間隔を開ける。

プロパティ設定

flexで指定する。
flexは、flex-grow, flex-shrink, flex-basisの設定を同一にできるショートハンド。
flex-grow, flex-shrink, flex-basisで設定しても問題ないが、W3Cで推奨されており、読めたほうがメリットが大きい。
デフォルト値: 0 1 auto

CSS Flexible Box Layout Module Level 1

設定例

.flex-item {
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

各プロパティの説明

flex-grow

Flexアイテムの「伸びる」倍率

flex-shrink

Flexアイテムの「縮む」倍率

flex-basis

ベースとなる長さの設定

参考サイト

coliss.com

liginc.co.jp

www.webcreatorbox.com

CSS Flexible Box Layout Module Level 1

Flexboxの基礎知識・バグ情報

CSS3 Flexbox Properties
翻訳: CSS3 Flexbox の各プロパティの使い方

Flexboxの各ブラウザのサポート状況 -Can I use