Speaking Design

Blogブログ

【コピペ対応】便利なはずなのにややこしいFlexboxまとめ:アイテム編

【コピペ対応】便利なはずなのにややこしいFlexboxまとめ:アイテム編

わかったようでわからないフレキシブルボックスのアイテム編まとめです。
本ページはフレキシブルボックス:コンテナ編の続編になります。
コンテナ編と同様、コピペで使えます。

目次

基本のフレキシブルボックス

フレキシブルボックス自体の解説はコンテナ編に譲ります。
コンテナ編同様、今回も以下のHTMLとCSSを基本に進めます。

<ul>
  <li>1</li>
  <li>2</li>
</ul>
ul{ display:flex; }

要素の表示順:order

orderを使うと、アイテム要素の表示順を設定することができます。

li:first-child{ order:2; }

li:last-child{ order:1; }
  • 1
  • 2

要素の伸び比率:flex-grow

要素がそれぞれ、コンテナ幅のどのくらいの割合を取得するかを決定します。
下記の例では、コンテナ幅に対してそれぞれ1:2の割合で陣取りをします。

・1番目の要素幅:1/3
・2番目の要素幅:2/3

/* 1つめのアイテム幅:全体の1/3 */
  li:first-child{ flex-grow:1; }

/* 2つめのアイテム幅:全体の2/3 */
li:last-child{ flex-grow:2; }
  • 1
  • 2

要素の縮み比率:flex-shrink

アイテム要素の合計幅がコンテナ幅を超えた時、どのくらいの割合で間引きを引き受けるか決定します。

/* 1つめのアイテム幅 = 本来の幅 - オーバーしたサイズの内1/3 */
li:first-child{ flex-shrink:1; }

/* 2つめのアイテム幅 = 本来の幅 - オーバーしたサイズの内2/3 */
li:last-child{ flex-shrink:2; }
  • 1
  • 2

例えば以下のような状態だとすると
・コンテナ→width:500px;
・1つめのアイテム→width:400px; flex-shrink:1;
・2つめのアイテム→width:400px; flex-shrink:2;

2つのアイテムの合計は800pxで、コンテナ幅を300pxオーバーするので、以下のような処理が行われます。
1.オーバーした300pxを1:2に分ける(100px : 200px)
2.1つめのアイテム幅:400px – 100px = 300pxになる
3.2つめのアイテム幅:400px – 200px = 200pxになる

要素の基本サイズ:flex-basis

要素のデフォルトの取り分です。

li:first-child{ flex-basis:100px; }

li:last-child{ flex-basis:200px; }
  • 1
  • 2

特定の要素一個だけ並びを変えたい:align-self

align-itemsの個別対策版です。
align-itemsは、全てのアイテムの並びをまとめて制御できる、コンテナ用のプロパティでした。
align-selfは、これだけは並びを変えたい!というアイテムに記述するプロパティです。
ここからは、以下のhtmlをサンプルとします。

<ul>
  <li>1</li>
  <li>2<br>2</li>
  <li>3<br>3<br>3</li>
</ul>

自分だけ上付きになりたい / align-items:flex-start

要素の上側で整列されます。
以下は、全体にはflex-end(下付き)が指定されているのに対し、一つ目の要素だけflex-start(上付き)を再指定した例です。

ul{
  display:flex;
  align-items:flex-end;
}

li:first-child{
  align-self:flex-start;
}
  • 1
  • 2
    2
  • 3
    3
    3

自分だけ下付きになりたい / align-self:flex-end

要素の下側で整列されます。
今度は先ほどと逆の例。全体にはflex-start(上付き)が指定されているのに対し、一つ目の要素だけflex-end(下付き)を再指定しています。

ul{
  display:flex;
  align-items:flex-start;
}

li:first-child{
  align-self:flex-end;
}
  • 1
  • 2
    2
  • 3
    3
    3

自分だけ中央になりたい / align-self:center

中央に整列されます。

li:first-child{
  align-self:center;
}
  • 1
  • 2
    2
  • 3
    3
    3

自分だけテキストベースラインになりたい / align-self:baseline

テキストのベースラインで整列されます。
ベースラインってどこ?→コンテナにおけるalign-items:baselineと同じ考え方です。

li:first-child{
  align-self:baseline;
}
  • 1
  • 2
    2
  • 3
    3
    3

自分だけめいっぱい伸びたい / align-self:stretch

縦幅いっぱいに伸びます。

ul{
  display:flex;
  align-items:flex-start;
}

li:first-child{
  align-self:stretch;
}
  • 1
  • 2
    2
  • 3
    3
    3

まとめ

アイテム側のフレキシブルボックス設定を紹介しました。
たくさんプロパティがある(あと計算がややこしい)一方、実用性を考えるとそんなに出番はないかな?という気もしますが、何ができるのか知っておくのに損はないでしょう。

フレキシブルボックスの主力であるコンテナ側の設定と合わせ、思い通りのレイアウトを実現してください。