Web白描

Flexboxアイテムで指定できるプロパティ

★CSS基礎 ★Flexbox

Flexboxアイテムで指定できるプロパティ

order：並び順

.itemA{
  order: 4;
}
.itemB{
  order: 1;
}
.itemC{
  order: 3;
}
.itemD{
  order: 2;
}

flex-grow：伸び率

flexコンテナーの幅に余りがある場合にflexアイテムの伸び率を他のflexアイテムとの相対値（整数）で指定します
デフォルトは「0」です

指定なし

１つのみ指定

１つだけに指定する場合、１以上の数を指定してもこれ以上は伸びません

.itemA{
  flex-grow: 1;
}

４つのflexアイテムに指定

他のflexアイテムにも指定した場合は、それぞれの指定した数値の相対値で伸縮率が自動で計算されます

.itemA{
  flex-grow: 4;
}
.itemB{
  flex-grow: 1;
}
.itemC{
  flex-grow: 1;
}
.itemD{
  flex-grow: 1;
}

flex-shrink：縮み率

flexアイテムの幅の合計がflexコンテナーの幅を超える場合、flexアイテムの縮む率を他のflexアイテムとの相対値（整数）で指定します
デフォルトは「1」です
flexコンテナーが「flex-wrap: nowap」の場合に有効です

以下の場合、itemAを除いた残りを５等分した余りがitemAに割り当てられる。

.item {
  width: 30%;
}
.container {
  display: flex;
  flex-wrap: nowap;
}
.itemA {
  flex-shrink: 5;
}

flex-basis：ベースの幅

flexアイテムのベースの幅を「width」のようにパーセントやピクセルで指定できます
デフォルトは「flex-basis:auto」です
ポイントはあくまでベースの幅であって必ずその幅になる訳ではありません

.itemA {
  flex-basis: 50%;
}

合計が100％以上になる場合は、自動で幅が計算されます

.itemA {
  flex-basis: 50%;
}
.itemB {
  flex-basis: 50%;
}
.itemC {
  flex-basis: 50%;
}
.itemD {
  flex-basis: 50%;
}

flex：flexアイテムの幅をまとめて指定（grow shrink basis）

「flex」は「flex:grow」「flex: shrink」「flex: basis」をまとめて指定できるショートハンドです
デフォルトはそれぞれのデフォルトの値の「flex:0 1 auto;」です

.itemA {
  flex: 0 1 auto;
}

.itemA {
  flex: 0 1 200px;
}

align-self：垂直方向の位置

「align-items」と同じですが、flexアイテム個別に指定できます

align-self：auto（デフォルト）

.itemA{
  align-self: auto;
}

align-self：flex-start

.container {
  display: flex;
  align-items: flex-end;
  height: 400px;
}
.itemA{
  align-self: flex-start;
}

align-self：flex-end

.container {
  display: flex;
  align-items: flex-start;
  height: 400px;
}
.itemA{
  align-self: flex-end;
}

align-self：center

.container {
  display: flex;
  align-items: flex-start;
  height: 400px;
}
.itemA{
  align-self: center;
}

align-self：stretch

.container {
  display: flex;
  align-items: flex-start;
  height: 400px;
}
.itemA{
  align-self: stretch;
}

align-self：baseline

.container {
  display: flex;
  align-items: flex-end;
  height: 400px;
}
.itemA{
  align-self: baseline;
}