Flexbox サンプル

とても便利だけど何度調べても即座に忘れるFlexboxのサンプル。
仕様:CSS Flexible Box Layout Module Level 1 (W3C)
参考:CSS フレックスボックスレイアウト - CSS: カスケーディングスタイルシート | MDN

固定の指定値

#container {
    display: flex;
    width: 23em;
    height: 8em;
    max-width: 90%;
    max-height: 90%;
    background-color: #000000;
}

.item {
    display: block;
    width: 4.5em;
    height: 2em;
    margin: 0;
    padding: 0.1em;
    outline: solid 1px #ffffff;
}

サンプル

Item - 1
Item - 2
Item - 3
Item - 4
Item - 5
Item - 6
Item - 7

配置の指定

flex-wrap … アイテムの折り返し可否の設定(コンテナ要素に対して設定)

flex-direction … 主軸の設定(コンテナ要素に対して設定)

justify-content … 主軸上の配置場所を設定(コンテナ要素に対して設定)

align-content … 交差軸上の配置場所を設定(コンテナ要素に対して設定)

大きさの指定

justify-items … 主軸方向のアイテム配置を設定(アイテム要素に設定する justify-self の総括指定・コンテナ要素に対して設定)

align-items … 交差軸方向のアイテム配置を設定(アイテム要素に設定する align-self の総括指定・コンテナ要素に対して設定)

to index