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

こばゆた

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

チャッピー

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

こばゆた

よく覚えていたね

その子要素の方にも便利なプロパティがあるので解説していきます！

今回は一気に説明していくので最後のまとめだけでもなんとなくわかると思いますのでそちらだけでもどうぞ！

今回の内容

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

1.align-self

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

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

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

<div>
  <div>aaa</div>
  <div class="boxb">bbb</div>
  <div>ccc</div>
  <div>ddd</div>
</div>

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

aaa

bbb

ccc

ddd

こばゆた

子要素が個別に指定されています

きなこ

入る値はいつもとあまり変わらないんだね

こばゆた

なので個々の説明は割愛しました

また例の如くflex-directionの値で動きが変わるので実際に動かしてみてください

クリックで値が変わります。

aaa

bbb

ccc

ddd

eee

flex-end

center

flex-start

stretch

baseline

auto

column

row

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

.boxb{
  align-self: center;
}
/*class="boxb"を交差軸方向の中心に配置する*/

.boxc{
  align-self: flex-start; 
}
/*class="boxc"を交差軸方向の始点に配置する*/

.boxd{
  align-self: stretch;
}
/*class="boxd"を交差軸方向に伸ばして配置する*/

.boxe{
  align-self: baseline;
}
/*class="boxe"を交差軸方向のベースラインに配置する*/

2.flex-basis

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

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

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

1.主軸方向が横ver.

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

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

aaa

bbb

ccc

2.主軸方向が縦ver.

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

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

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

aaa

bbb

ccc

widthとflex-basisを一緒に使うとflex-basisが優先されます。

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

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

.boxc{
  width: 100px;
}

aaa

bbb

ccc

チャッピー

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

また、max-widthとflex-basisを同時に指定するとmax-widthが優先されます。

.boxa,.boxc{
  width: 100px;
}
.boxb{
  max-width: 50px;
  flex-basis: 100px;
}

aaa

bbb

ccc

チャッピー

こちらはflex-basis<max-widthってことだね

まとめるとwidth<flex-basis<max-widthという優先順位になります。

3.flex-grow

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

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

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

チャッピー

こちらが通常で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;
}

aaa

bbb

ccc

チャッピー

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

こばゆた

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

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

.flex-container{
  width: 300px;
}

.boxa{
  width: 50px;
  flex-grow: 1;
}

.boxb{
  width: 50px;
  flex-grow: 1;
}

.boxc{
  width: 50px;
  flex-grow: 3;
}

aaa

bbb

ccc

きなこ

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

割合の計算方法は大丈夫ですか？

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

式にすると150px÷(1+1+3)で割合1辺り30pxとなり、それを元の幅に加えることになります。

aaa

bbb

ccc

1:1:1

1:1:3

1:0:0

reset

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

4.flex-shrink

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

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

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

.flex-container{
  width: 450px;
}

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

aaa

bbb

ccc

ddd

eee

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

こばゆた

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

.flex-container{
 width: 450px;
}

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

きなこ

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

上の2つを応用すれば縮める割合も変える事ができます。

.flex-container{
  width: 450px;
}

.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プロパティ”をひとまとめで指定する事ができます。

チャッピー

恒例の後出し…

こばゆた

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

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

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

.flex-container{
  width: 450px;
}

.boxe{
  flex: 0 0 350px;
}

.boxf{
  flex: 0 0 200px;
}

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

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

.flex-container{
  width: 450px;
}

.boxe{
  flex: 0 1 350px;
}

.boxf{
  flex: 0 1 200px;
}

eee

fff

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

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

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

eee

fff

flex-basis:100%;

initial

auto

none

.flex-container{
  width: 100%;
}

.eee,.fff{
  width:25%
}

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

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

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

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

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

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

6.order

普通だと要素は書いた順に配置されますがorderプロパティを使うと任意の順番に子要素を配置することができます。

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

セレクター{
  order: 値;
}

こばゆた

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

.box3{
  order: 1;
}

こばゆた

値にはマイナスも使えます

マイナスを使うどうなるでしょうか？

.box3{
  order: -1;
}

こばゆた

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

こばゆた

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

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

.box1{
  order: 4;
}

.box2{
  order: 1;
}

.box3{
  order: 5;
}

.box4{
  order: 2;
}

.box5{
  order: 6;
}

.box6{
  order: 3;
}

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

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まとめ