CSS Flexbox

HTML&CSS

Flexbox(フレックスボックス)について

フレックスボックスレイアウトの各プロパティを調べてみました

CSSの今回使用するプロパティの一覧です

  display:flex; 
  
  flex-direction: row;  /* 初期値 */
  flex-direction: row-reverse;
  flex-direction: column;
  flex-direction: column-reverse;

  flex-wrap: nowrap; /* 初期値 */
  flex-wrap: wrap;
  flex-wrap: wrap-reverse;

  justify-content: flex-start;  /* 初期値 */
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
  
  align-content: stretch;  /* 初期値 */
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;

  align-items: stretch; /* 初期値 */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;

  align-self: auto;  /* 初期値 */
  align-self: stretch;
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;

こちらの設定で解説していこうと思います

各々のアイテムはwidthに80px min-heightに
Item-1から順番に30px 40px 50px 60px 70px 80pxで指定しています
min-heightを使用しているのはheightでは
高さが固定されalign-itemsのstretchが無視されます

基本となるHTML・CSSは以下の通りです

<div class="container">
    <div class="item-01">Item-1</div>
    <div class="item-02">Item-2</div>
    <div class="item-03">Item-3</div>
    <div class="item-04">Item-4</div>
    <div class="item-05">Item-5</div>
    <div class="item-06">Item-6</div>
  </div>
.container {
  height: 200px;
  width: 260px;
  background-color:gray;
  
  display:flex; 
  flex-direction:row;
  flex-wrap:wrap;
  
  justify-content:flex-start;
  align-content:stretch;
  align-items:flex-start;
}

div > div {
  box-sizing: border-box;
  width: 80px;
  border:solid 4px black;
}

.item-01 {
  min-height: 30px;
}
.item-02 {
  min-height: 40px;
}
.item-03 {
  min-height: 50px;
}
.item-04 {
  min-height: 60px;
}
.item-05 {
  min-height: 70px;
}
.item-06 {
  min-height: 80px;
}

display:flex;

要素がフレックスボックスモデルに従いレイアウトする事を指定する

flex-direction

フレックスアイテムの軸となる方向を指定する 
それにより、他のレイアウト用プロパティのレイアウトはここで指定した軸の方向に対して行われる

flex-direction: row; /* 初期値 */

軸を横方向に設定して横並びにアイテムを配列する

レイアウトの主となる軸を左から右に配置する

flex-direction: row-reverse;

軸を横並びにしてさらに逆方向から配列する

レイアウトの主となる軸を右から左に配置する

flex-direction: column;

軸を縦方向にして縦並びにアイテムを配列する

レイアウトの主となる軸を上から下に縦方向に配置する

flex-direction: column-reverse;

軸を縦方向にしてアイテムを逆方向から配列する

レイアウトの主となる軸を下から上に縦方向に配置する

flex-wrap

フレックスアイテムの折り返しを指定する

flex-wrap: nowrap; /* 初期値 */

フレックスアイテムを折り返さない

複数あるフレックスアイテムは軸方向に並べられる
この時フレックスアイテムは出来るだけコンテナーに収まるように試みられる
画像ではアイテムのwidth情報が無視され最小サイズまで縮小されている

flex-wrap: wrap;

フレックスアイテムを折り返す

各行または各列のサイズは最もサイズが大きいアイテムに隙間のサイズ分を振り分けたサイズになる
コンテナーのサイズが特に決められていない場合は詰めて配置される

flex-wrap: wrap-reverse;

フレックスアイテムを折り返し逆方向から揃える

各行または各列のサイズは最もサイズが大きいアイテムに隙間のサイズ分を振り分けたサイズになる
コンテナーのサイズが特に決められていない場合は詰めて配置される

ここまでで大まかなレイアウトが決まる

以下では各々アイテムの配置についてのプロパティになる

justify-content

フレックスアイテムの軸方向の空白(隙間)を調整する
flex-direction: row;の指定の場合は行の方向に割り当てる
flex-direction: column;の指定の場合は列方向に割り当てる

justify-content: flex-start; /* 初期値 */

軸の開始位置からフレックスアイテムを詰めて配置する

左の例ではアイテムは左に詰めて配置され空白は右側に寄る
flex-direction:row;
flex-wrap:wrap
に設定されています

justify-content: flex-end;

軸の終了位置からフレックスアイテムを詰めて配置する

左の例ではアイテムは右に詰めて配置され空白は左側に寄る
flex-direction:row;
flex-wrap:wrap
に設定されています

justify-content: center;

軸の中央にフレックスアイテムを詰めて配置する

左の例ではアイテムは中央に詰めて配置され空白は左右均等に配置される
flex-direction:row;
flex-wrap:wrap
に設定されています

justify-content: space-between;

最初のアイテムと最後のアイテムが開始位置と終了位置に隙間を開けずに配置され
アイテム間の空白は均等割に配置される

アイテムの最初と最後が空白が無く詰めて配置され中間の空白は均等に配置される
flex-direction:row;
flex-wrap:wrap
に設定されています

justify-content: space-around;

フレックスアイテムの周りの空白を均等にし配置する

アイテムの左右の空白は同じサイズで配置される
アイテム間の空白は重ならずお互いの空白がそのままで配置される
したがって、左端と右端の空白は中間の空白の半分のサイズとなる
flex-direction:row;
flex-wrap:wrap
に設定されています

justify-content: space-evenly;

フレックスアイテムの左右のスペースは全て同じサイズになる

フレックスアイテムの左右と中間の空白は全て同じサイズになる

flex-direction:row;
flex-wrap:wrap
に設定されています

align-content

フレックスコンテナーの交差軸方向の各行または各列のサイズを調整する
flex-wrap: nowrap;で単一行または列の場合は効果がない

align-content: stretch; /* 初期値 */

コンテナー内の各行または各列で最も大きいサイズのアイテムの割合で配置される
アイテムが同じサイズの場合は各行を均等割で配置する

align-items:stretch;(初期値)の場合引き延ばされるが
サイズは最大サイズの比率で引き延ばされる

画像ではItem-3が50pxでItem-6が80pxなので
その比率になる

また、align-items:flex-start;だと
min-heightのサイズが優先される

align-content: flex-start;

交差軸の開始位置からフレックスアイテムを詰めて配置する
コンテナーサイズがアイテムサイズの合計より大きい場合は空白が足される

画像ではalign-items:flex-start;

Item-3とItem-6が各行の最大サイズで詰めて配置される

align-content: flex-end;

交差軸の終了位置からフレックスアイテムを詰めて配置する
コンテナーサイズがアイテムサイズの合計より大きい場合は前に空白が足される

画像ではアイテムは下側に詰められる

align-content: center;

交差軸のコンテナー中央にフレックスアイテムを詰めて配置する
コンテナーサイズがアイテムサイズの合計より大きい場合は前後に空白が足される

中央にアイテムが詰めて配置され上下に同じサイズの空白が足される

align-content: space-between;

最初のアイテムと最後のアイテムが開始位置と終了位置に隙間を開けずに配置され
アイテム間の空白は均等に割り振られる

交差軸の開始位置と終了位置に詰めて配置され空白が間に配置される

align-content: space-around;

全てのフレックスアイテムの左右または上下に同じサイズの空白を配置し空白が重ならないように配置される

上と下の空白を合わせたサイズと同じサイズが中間に配置される

align-content: space-evenly;

フレックスコンテナー内の交差軸方向の空白を均等に配置する

縦方向の全ての空白は同じサイズになる

align-items

アイテムの交差軸方向の配置align-selfの設定をコンテナー内の全てのアイテムに対して行う
align-selfが設定されているアイテムはそちらの設定が優先される

align-items: stretch; /* 初期値 */

アイテムはコンテナーのサイズまで隙間が出来ないように引き延ばされる
複数行の場合は各行で最もサイズが大きいアイテムの比率で隙間なく引き延ばされる
またアイテムに固定サイズが設定されている場合は無視される

アイテムにサイズ指定がない場合は引き延ばされる

画像はalign-content: stretch;の場合です

アイテムのサイズはalign-contentで指定された行のサイズだけ引き延ばされる

画像はalign-content: flex-start;の場合

align-items: flex-start;

フレックスアイテムを開始位置から配置する

開始位置は、align-content で設定された各行の開始位置になる

align-items: flex-end;

フレックスアイテムを終了位置から配置する

終了位置は、align-content で設定された各行の終了位置になる

align-items: center;

フレックスアイテムを中央に揃えて配置する

align-content で設定された各行の中央位置に揃えられる

align-self

設定内容については子要素である各々のアイテムに個別に設定するものです
設定の内容はalign-itemsと同じです
align-itemsの設定はalign-selfで上書きされます

Item-1 に align-self: stretch;
Item-2 に align-self:flex-start;
Item-3 に align-self:flex-end;
Item-4 に align-self:flex-start;
Item-5 に align-self:flex-end;
Item-6 に align-self:center;
を設定したものです

まとめ

フレックスボックスレイアウトを宣言する

display:flex; 

フレックスボックスのレイアウトを指定する

flex-direction
flex-wrap
justify-content
align-content

フレックスアイテムの位置を指定する

align-items
align-self

主に交差軸方向に対するサイズと位置指定ですが、主軸方向については別のプロパティで指定します
以下は主軸方向の配置を指定する主なプロパティです

flex-grow
flex-shrink
flex-basis

これらについては、また次回以降に行います

以上、参考になれば幸いです

コメント