求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

flexboxアイテムのプロパティ

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

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

f:id:web-css-design:20181225022214g:plain

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

指定なし

f:id:web-css-design:20181225022933g:plain

1つのみ指定

  • 1つだけに指定する場合、1以上の数を指定してもこれ以上は伸びません
.itemA{
  flex-grow: 1;
}

f:id:web-css-design:20181225022620g:plain

4つのflexアイテムに指定

  • 他のflexアイテムにも指定した場合は、それぞれの指定した数値の相対値で伸縮率が自動で計算されます
.itemA{
  flex-grow: 4;
}
.itemB{
  flex-grow: 1;
}
.itemC{
  flex-grow: 1;
}
.itemD{
  flex-grow: 1;
}

f:id:web-css-design:20181225023530g:plain

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

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

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

f:id:web-css-design:20181225033155g:plain

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

f:id:web-css-design:20181225024820g:plain

  • 合計が100%以上になる場合は、自動で幅が計算されます
.itemA {
  flex-basis: 50%;
}
.itemB {
  flex-basis: 50%;
}
.itemC {
  flex-basis: 50%;
}
.itemD {
  flex-basis: 50%;
}

f:id:web-css-design:20181225024952g:plain

flexflexアイテムの幅をまとめて指定(grow shrink basis)
  • flex」は「flex:grow」「flex: shrink」「flex: basis」をまとめて指定できるショートハンドです
  • デフォルトはそれぞれのデフォルトの値の「flex:0 1 auto;」です
.itemA {
  flex: 0 1 auto;
}

f:id:web-css-design:20181225025506g:plain

.itemA {
  flex: 0 1 200px;
}

f:id:web-css-design:20181225025716g:plain

align-self:垂直方向の位置
  • 「align-items」と同じですが、flexアイテム個別に指定できます

align-self:auto(デフォルト)

.itemA{
  align-self: auto;
}

f:id:web-css-design:20181225030251g:plain

align-self:flex-start

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

f:id:web-css-design:20181225031124g:plain

align-self:flex-end

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

f:id:web-css-design:20181225031335g:plain

align-self:center

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

f:id:web-css-design:20181225031657g:plain

align-self:stretch

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

f:id:web-css-design:20181225031933g:plain

align-self:baseline

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

f:id:web-css-design:20181225032307g:plain