Flexレイアウト サンプル

固定の指定値

#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;
}

サンプル サンプルを画面右下に固定サンプルを通常の位置に戻す

• アイテムの幅
• アイテムの高さ

配置の指定

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

• アイテムの幅
• アイテムの高さ

• flex-wrap : nowrap 主軸に対して単一行に配置(はみ出しもありうる)
• flex-wrap : wrap 折り返しを実施し正の方向で積み重ねる
• flex-wrap : wrap-reverse 折り返しを実施し逆の方向で積み重ねる

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

• アイテムの幅
• アイテムの高さ

• flex-direction : row 行の正の方向に配置
• flex-direction : row-reverse 行の逆の方向に配置
• flex-direction : column 積み重ねて正の方向に配置
• flex-direction : column-reverse 積み重ねて負の方向に配置

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

• アイテムの幅
• アイテムの高さ

• justify-content : normal 既定の位置に寄せる(未設定時と同じ)
• justify-content : center 主軸方向の中央に寄せる
• justify-content : start 主軸方向の先頭に寄せる
• justify-content : end 主軸方向の末尾に寄せる
• justify-content : flex-start 主軸上の先頭アイテムの側に寄せる(flex-directionが逆の場合は見た目逆の方向に寄せられる)
• justify-content : flex-end 主軸上の末尾アイテムの側に寄せる(flex-directionが逆の場合は見た目正の方向に寄せられる)
• justify-content : left 主軸方向の左端に寄せる(主軸が縦の場合はstartと同じ)
• justify-content : right 主軸方向の左端に寄せる(主軸が縦の場合はendと同じ)
• justify-content : space-between 主軸方向に均等に配置し、最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる
• justify-content : space-around 主軸方向に均等に配置し、両端に半分の大きさの空白を置く
• justify-content : space-evenly 主軸方向に均等に配置し、全てのアイテムの間に同じ大きさの空白を置く
• justify-content : stretch 主軸方向に均等に配置し、サイズが 'auto' であるアイテムはコンテナサイズに合わせて引きのばす

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

• アイテムの幅
• アイテムの高さ

• align-content : normal 既定の位置に寄せる(未設定時と同じ)
• align-content : center 交差軸方向の中央に寄せる
• align-content : start 交差軸方向の先頭に寄せる
• align-content : end 交差軸方向の末尾に寄せる
• align-content : flex-start 交差軸上の先頭アイテムの側に寄せる
• align-content : flex-end 交差軸上の末尾アイテムの側に寄せる
• align-content : baseline ベースラインの配置
• align-content : space-between 交差軸方向に均等に配置し、最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる
• align-content : space-around 交差軸方向に均等に配置し、両端に半分の大きさの空白を置く
• align-content : space-evenly 交差軸方向に均等に配置し、全てのアイテムの間に同じ大きさの空白を置く
• align-content : stretch 交差軸方向に均等に配置し、サイズが 'auto' であるアイテムはコンテナサイズに合わせて引きのばす

大きさの指定

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

• アイテムの幅
• アイテムの高さ

• justify-items : auto 親ボックスの justify-items プロパティ値を使用(ない場合はnormalと同じ)
• justify-items : normal (現在のレイアウトモードに依存)
• justify-items : stretch アイテムは範囲いっぱいにのびる
• justify-items : center 主軸方向の中央に寄る
• justify-items : start 主軸の先頭に寄る
• justify-items : end 主軸の末尾に寄る
• justify-items : flex-start 主軸上の先頭アイテムの側に寄る(flex-directionが逆の場合は見た目逆の方向に寄せられる)
• justify-items : flex-end 主軸上の末尾アイテムの側に寄る(flex-directionが逆の場合は見た目正の方向に寄せられる)
• justify-items : self-start アイテムの先頭側にある配置コンテナの辺に対して寄り、互いに接する
• justify-items : self-end アイテムの末尾側にある配置コンテナの辺に対して寄り、互いに接する
• justify-items : left 左側に寄る
• justify-items : right 右側に寄る
• justify-items : baseline ベースラインに寄る

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

• アイテムの幅
• アイテムの高さ

• align-items : normal (現在のレイアウトモードに依存)
• align-items : stretch アイテムは範囲いっぱいにのびる
• align-items : center 交差軸の中央付近に寄せる
• align-items : start 交差軸の先頭に寄せる
• align-items : end 交差軸の末尾に寄せる
• align-items : flex-start 交差軸上の先頭アイテムの側に寄せる(flex-directionが逆の場合は見た目逆の方向に寄せられる)
• align-items : flex-end 交差軸上の末尾アイテムの側に寄せる(flex-directionが逆の場合は見た目正の方向に寄せられる)
• align-items : baseline ベースラインに配置