flex-item(子要素)に対して指定するプロパティ【flexbox】

こばゆた

今回はflex-itemに設定できるプロパティについてです

チャッピー

flex-itemというのはcontainerが親要素だったのに対して子要素という意味だったね

今日のテーマ

flexboxを使用したときの子要素につけるプロパティがわかる
幅や高さ、順番も柔軟に変えられるようになる

1.align-self
2.flex-basis
- 2-1.主軸方向が横ver.
- 2-2.主軸方向が縦ver.
3.flex-grow
4.flex-shrink
5.flex
- 5-1.flexプロパティ
- 5-2.値をキーワードで設定
6.order
7.まとめ

1.align-self

align-selfプロパティは子要素を個別に交差軸方向への指定ができます。

また子要素の幅(または高さ)を指定しないと親要素いっぱいに伸びます。

.container{
  display: flex; /* 親要素にdisplay: flex;を指定 */
}

セレクター{
  align-self: 値;
}

例：

<div class="container">
  <div class="item boxa">aaa</div>
  <div class="item boxb">bbb</div>
  <div class="item boxc">ccc</div>
  <div class="item boxd">ddd</div>
</div>

.boxb{
  align-self: flex-end; /* 交差軸方向の終点に配置する */
}

表示例

aaa

bbb

ccc

ddd

こばゆた

boxbにalign-self: flex-end;を指定したところ個別に動きが出ていますね。

では他の値ではどうなるか動かして遊んでみましょう。
flex-directionで軸を変えたときの動きも注目です。

きなこ

プロパティに入る値はいつもとあまり変わらないんだね

See the Pen Untitled by kbyt (@kbo58) on CodePen.

値	効果
`flex-start`	交差軸方向の始点に配置
`center`	交差軸方向の中心に配置
`flex-end`	交差軸方向の終点に配置
`stretch`	交差軸方向に伸ばして配置
`baseline`	交差軸方向に子要素のベースラインに沿って配置
`auto`	交差軸方向に親要素の幅に合わせて配置

2.flex-basis

flex-basisプロパティは子要素の主軸方向のサイズを変えるプロパティです。

主軸方向が横なら幅、縦なら高さを指定します。

.container{
  display: flex; /* 親要素にdisplay: flex;を指定 */
}

セレクター{
  flex-basis: 値;
}

2-1.主軸方向が横ver.

.boxa,
.bocb{
  width: 25%; /* 幅を25%に指定 */
}

.boxc{
  flex-basis: 50%; /* 主軸方向へ50%広げる */
}

表示例

aaa

bbb

ccc

こちらは主軸方向に50%伸びています。

2-2.主軸方向が縦ver.

.container{
  display: flex;
  flex-direction: column; /* 縦並びにする */
}

.boxa,.bocb{
  height: 50px; /* 高さを50pxに指定 */
}

.boxc{
  flex-basis: 100px; /* 主軸方向へ100px広げる */
}

表示例

aaa

bbb

ccc

疑問に思われた方も多いと思いますが、widthとflex-basisを一緒に使うとflex-basisが優先されます。

.container{
  display: flex;}

.boxa{
  width: 100px;
  flex-basis: 10px;
}

.boxb{
  flex-basis: 100px;
  width: 10px; /* あえてboxaと書く順番を逆にしています */
}

.boxc{
  width: 100px;
}

aaa

bbb

ccc

チャッピー

width<flex-basisになっているね

3.flex-grow

flex-glowプロパティは主軸の方向に余白がある場合、子要素がどう分けるかを指定します。

また初期値は”0″なので指定しない限りは余白があっても分けません。

.container{
  display: flex; /* 親要素にdisplay: flex;を指定 */
}

セレクター{
  flex-grow: 値;
}

例：

<div class="flex-container">
  <div class="boxa">aaa</div>
  <div class="boxb">bbb</div>
  <div class="boxc">ccc</div>
</div>

.flex-container{
  width: 300px;
}

.boxa{
  width: 50px;
}

.boxb{
  width: 50px;
}

.boxc{
  width: 50px;
}

こばゆた

親要素は幅300pxで子要素は50pxが３つなので計150pxを占めているはずです。

表示例

aaa

bbb

ccc

チャッピー

設定しないと初期値は0だったから何も変わらないんだよね

きなこ

残り150pxでこれをflex-growを使って分けるということだね。

こばゆた

ここからはflex-growプロパティを使って余白を分配する場合です

1:1:3の割合で分配してみましょう

.flex-container{
  width: 300px;
}

.boxa{
  width: 50px;
  flex-grow: 1;　/* flex-grow: 1;を追加 */
}

.boxb{
  width: 50px;
  flex-grow: 1; /* flex-grow: 1;を追加 */
}

.boxc{
  width: 50px;
  flex-grow: 3; /* flex-grow: 3;を追加 */
}

表示例

aaa

bbb

ccc

きなこ

余白がきれいに分配されてる！

割合の計算方法はですが、この場合ですと「分けるもの」を「割合を全部たしたもの」で割ると1つあたりの数値が得られます。

式にすると150px÷(1+1+3)で割合1辺り30pxとなり、30:30:90となります。

それをそれぞれの幅50pxに加えて80px,80px,140pxとなり完成です。

See the Pen Untitled by kbyt (@kbo58) on CodePen.

４つ目の例のように1つだけに値を”1″にすると余白を全て割り当てることができます。

4.flex-shrink

flex-shrinkプロパティは親要素から子要素が溢れた場合の縮む比率を指定できます。

ちなみに初期値は”1“なので親要素に収まりきらない分は均等に収まるようになっています。

.container{
  display: flex; /* 親要素にdisplay: flex;を指定 */
}

セレクター{
  flex-shrink: 値;
}

例：

<div class="container">
  <div class="boxa">aaa</div>
  <div class="boxb">bbb</div>
  <div class="boxc">ccc</div>
  <div class="boxd">ddd</div>
  <div class="boxe">eee</div>
</div>

.container{
  width: 450px;
  display: flex;
}

.boxa,
.boxb,
.boxc,
.boxd,
.boxe{
  width: 100px;
}

表示例

aaa

bbb

ccc

ddd

eee

子要素の合計が親要素を上回っているので本来なら溢れるはずですがflex-shrinkプロパティが初めから効いているのでちゃんと枠内に収まっています。

こばゆた

逆にflex-shrinkの値を”0″にすると…

.container{
 width: 450px;
 display: flex;
}

.boxa,
.boxb,
.boxc,
.boxd,
.boxe{
 width: 100px;
 flex-shrink: 0;
}

表示例

きなこ

縮められずにはみ出ている

flex-shrinkを応用すれば縮める割合も変える事ができます。

.flex-container{
  width: 450px;
  display: flex;
}

.boxa,.boxb{
  width: 100px;
  flex-shrink: 1;
}

.boxc,.boxd,.boxe{
  width: 100px;
  flex-shrink: 0;
}

表示例

このようにflex-shrinkの値を様々に変えることによって縮め方も自在にできます。

5.flex

5-1.flexプロパティ

flexプロパティは今まで見てきたflex-basis、flex-glow、flex-shrinkをひとまとめで指定する事ができます。

チャッピー

恒例の後出し…

こばゆた

余白のところで見たショートハンドと同じような感じだと思ってください

順番はflex-glow、flex-shrink、flex-basisの順で指定されます。

セレクター{
  flex: flex-glowプロパティの値 flex-shrinkプロパティの値 flex-basisプロパティの値;
}

例1：

.container{
  width: 450px;
  display: flex;
}

.boxe{
  flex: 0 0 350px;
}

.boxf{
  flex: 0 0 200px;
}

表示例

こばゆた

当たり前ですが親要素が450pxで、子要素のどちらもflex-shrinkが0なので100pxはみ出ます。

例２：

こちらには子要素の両方にflex-shrink:1が指定されているので溢れた100pxを子要素で1:1で縮めているのがわかります。

.container{
  width: 450px;
  display: flex;
}

.boxe{
  flex: 0 1 350px;
}

.boxf{
  flex: 0 1 200px;
}

表示例

eee

fff

このようにflexプロパティはまとめて指定する事ができます。

5-2.値をキーワードで設定

値にキーワード入れる事でまとめて設定できるものもあります。

See the Pen Untitled by kbyt (@kbo58) on CodePen.

.container{
  width: 450px;
  display: flex;
}

.eee,.fff{
  width:25%
}

.eee{
  flex: none; /*flex: 0 0 auto;の意味で何もしない*/
}

.eee{
  flex: auto; /*flex: 1 1 auto;の意味で余白があれば分け、溢れても縮める*/
}

.eee{
  flex: initial; /*flex: 0 1 auto;の意味で余白があっても分けないが溢れたら縮める*/
}

.eee{
  flex: 1; /*flex: 1 0 0%;の意味で余白があったら分ける*/
}

.eee{
  flex: 0 0 100%; /*ただ単に横幅を設定*/
}

最後に出てきた数字で指定するのが一番楽なのではないかと思います。

ちょっと難しいですがflex:1;が頻出ですのでこちらを覚えておけば一旦は大丈夫です。

6.order

通常、要素は書いた順に配置されますがorderプロパティを使い、値に数字を入れることで子要素の順序を変えることができます。

また初期値には”0“が振られています。

.container{
  display: flex;
}

セレクター{
  order: 値;
}

例１：

こばゆた

例として3番の箱を一番右にしてみます

表示例

.box3{
  order: 1;
}

表示例

こばゆた

3番の箱は一番右に移動しました！

また値にはマイナスも使えます
マイナスを使うどうなるでしょうか？

例２：

.box3{
  order: -1;
}

こばゆた

他は初期値の”0″なのでそれらの左にいきました

表示例

例３：

こばゆた

全ての子要素に値を指定すれば順番も自由に指定できます

例として246135の順で並べてみました

.box1{
  order: 4;
}

.box2{
  order: 1;
}

.box3{
  order: 5;
}

.box4{
  order: 2;
}

.box5{
  order: 6;
}

.box6{
  order: 3;
}

表示例

任意の順番にできました！

ですがここまで入れ替えるとHTMLから作り直した方が良い気もしますが今回は例として取り上げました。

See the Pen order by kbyt (@kbo58) on CodePen.

7.まとめ

align-selfまとめ

flexitem(子要素)の交差軸方向への位置の揃えを指定する

セレクター{
  align-self: 値;
}

flex-basisまとめ

子要素の主軸方向のサイズを指定する
width<flex-basis<max-widthという優先順位になる

セレクター{
  flex-basis: 値;
}

flex-growまとめ

主軸の方向に余白がある場合、子要素にどう分けるかを指定する
初期値は”0″なので指定しないと分けない
各々に指定することで余白の割合を変えられる

セレクター{
  flex-grow: 値;
}

flex-shrinkまとめ

親要素から子要素が溢れた場合の縮む比率を指定する
初期値は”1″なので溢れたら自動的に分けてくれる
各々に指定することで縮める割合を変えられる

セレクター{
  flex-shrink: 値;
}

flexまとめ

flex-glowプロパティの値 flex-shrinkプロパティの値 flex-basisプロパティの値をまとめて設定できるプロパティ

セレクター{
  flex: flex-glowプロパティの値 flex-shrinkプロパティの値 flex-basisプロパティの値;
}

値には様々なキーワードを入れて指定することもできる

セレクター{
  flex: flex-glowプロパティの値 flex-shrinkプロパティの値 flex-basisプロパティの値;
}

セレクター{{
  flex: initial; /*flex: 0 1 auto;の意味で余白があっても分けないが溢れたら縮める*/
}

セレクター{{
  flex: auto; /*flex: 1 1 auto;の意味で余白があれば分け、溢れても縮める*/
}

セレクター{{
  flex: none; /*flex: 0 0 auto;の意味で何もしない*/
}

セレクター{{
  flex: 1; /*flex: 1 0 0%;の意味で余白があったら分ける*/
}

orderまとめ

値を指定することで任意の順番に子要素を配置することができる
初期値は”0″

セレクター{
  order: 値;
}

こばゆた

flex-itemのプロパティを一気に見てきましたので少し長くなりました

お疲れ様でした

1.align-self

2.flex-basis

2-1.主軸方向が横ver.

2-2.主軸方向が縦ver.

3.flex-grow

4.flex-shrink

5.flex

5-1.flexプロパティ

5-2.値をキーワードで設定

6.order

7.まとめ

広告

コメント