きまぐれ引きこもりんご80%

Flexbox【第4回】Flexboxアイテムのプロパティ

web制作

Flexboxアイテムのプロパティ

前回まではFlexboxコンテナーのプロパティでしたが、今回はFlexboxアイテムのプロパティです。Flexboxアイテム個別のプロパティを設定することで、より細かいレイアウトが可能になります。

flex-basisでFlexboxアイテムのベースとなる幅を設定しよう

flex-basis: auto;(初期値)

flex-basisはFlexboxアイテムの幅を指定できるプロパティです。
でもここで、widthと何が違うの?と疑問に思いますよね。ざっくり言うと基本的には同じです。
しかしながら、この後に出てくるflex-grow, flex-shrinkは、このflex-basisに基づいて伸縮を行いますのでflex-grow, flex-shrinkを設定する場合はwidthではなくflex-basisで指定しましょう。

.flex-item {
  width: 100px;
  height: 50px;
  background: orange;
  flex-basis: 50px;
}

See the Pen flex-basis by ossan (@g3) on CodePen.

flex-growでFlexboxアイテムの伸びる比率を指定しよう

flex-grow: 0; (初期値)

親要素の空きスペースを各Flexboxアイテムに割り当てる比率を指定することができます。
初期値の「0」は拡大なしになります。

.flex-item:nth-of-type(odd) {
  flex-grow: 3; 
}
.flex-item:nth-of-type(even) {
  flex-grow: 1; 
}

See the Pen flex-grow by ossan (@g3) on CodePen.

flex-shrinkでFlexboxアイテムの縮む比率を指定しよう

flex-shrink: 1; (初期値)

親要素をはみ出した分を各Flexboxアイテムから割り引く比率を指定することができます。
初期値の「1」は縮小されます。「0」は縮小なしになります。

.flex-item:nth-of-type(odd) {
  flex-shrink: 2; 
}
.flex-item:nth-of-type(even) {
  flex-shrink: 1; 
}

See the Pen flex-shrink by ossan (@g3) on CodePen.

orderでFlexboxアイテムの順番を指定しよう

order: 0;(初期値)

Flexboxアイテムの順番を指定することが出来ます。

See the Pen order by ossan (@g3) on CodePen.

align-selfでFlexboxアイテムの垂直方向の指定をしよう

align-self: auto; (初期値)

align-itemsと同じくFlexboxアイテムの垂直方向の揃えを指定できます。
プロパティ値も初期値のauto以外はalign-itemsと同じです。
align-itemsの指定よりalign-selfの指定の方が優先されます。
プロパティ値/auto,flex-start,flex-end
,center,stretch,baseline

See the Pen eKpLyJ by ossan (@g3) on CodePen.