HTML講座

FlexBox

フレックスコンテナ

フレックスアイテム

あ

い

う

え

お

フレックスコンテナのプロパティ

display:flex: display:flex;
中の要素をフレックスボックスアイテムにする

通常フロー

あ

い

う

え

お

<div>
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>

デフォルト(display:flexのみ指定)

あ

い

う

え

お

<div style="display:flex">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>
flex-direction: flex-direction:row(初期値) | row-reverse | column | column-reverse;
アイテムを並べる方向と順序－横｜横を逆順に｜縦｜縦を逆順に

flex-direction:row-reverse

あ

い

う

え

お

<div style="display:flex; flex-direction:row-reverse">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>

flex-direction:colomn-reverse

あ

い

う

え

お

<div style="display:flex; flex-direction:colomn-reverse">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>
justify-content: justify-content:flex-start(初期値) | flex-end | center | space-between | space-around;
左揃え|右揃え|中央揃え|両端揃えでボックスの間に余白|ボックスの周囲に余白

justify-content:flex-start(初期)

あ

い

う

<div style="display:flex; justify-content:flex-start">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
</div>

justify-content:flex-end

あ

い

う

<div style="display:flex; justify-content:flex-end">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
</div>

justify-content:center

あ

い

う

<div style="display:flex; justify-content:center">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
</div>

justify-content:space-between

あ

い

う

<div style="display:flex; justify-content:space-between">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
</div>

justify-content:space-around

あ

い

う

<div style="display:flex; justify-content:space-around">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
</div>
flex-wrap: flex-wrap:nowrap(初期値) | wrap | wrap-reverse;
flexboxが横に溢れたときに折り返すかどうか。

wrap-reverseは折り返しを上に積み上げる形で行う。

flex-wrap:nowrap

あ

い

う

え

お

<div style="display:flex; flex-wrap:nowrap">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>

flex-wrap:wrap

あ

い

う

え

お

<div style="display:flex; flex-wrap:wrap">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>

flex-wrap:wrap-reverse

あ

い

う

え

お

<div style="display:flex; flex-wrap:wrap-reverse">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>
align-content: align-content: stretch(初期値) | flex-start | flex-end | center | space-between | space-around ;
コンテンツを引き延ばす（初期値）|上揃え|下揃え|中央揃え|ボックス間に余白|周囲に余白

align-content:stretch;(初期値)

あ

い

う

え

お

<div style="display:flex; flex-wrap:wrap; align-content:stretch">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>

align-content:flex-start;

あ

い

う

え

お

<div style="display:flex; flex-wrap:wrap; align-content:flex-start">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>

align-content:flex-end;

あ

い

う

え

お

<div style="display:flex; flex-wrap:wrap; align-content:flex-end">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>

align-content:center;

あ

い

う

え

お

<div style="display:flex; flex-wrap:wrap; align-content:center">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>

align-content:space-between;

あ

い

う

え

お

<div style="display:flex; flex-wrap:wrap; align-content:space-between">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>

align-content:space-around;

あ

い

う

え

お

<div style="display:flex; flex-wrap:wrap; align-content:space-around">
  <div>あ</div>
  <div>い</div>
  <div>う</div>
  <div>え</div>
  <div>お</div>
</div>
align-items: align-items: stretch(初期値) | flex-start | flex-end | center | baseline ;
（初期値）|上/左揃え|下/→揃え|中央揃え|文字のベースラインで揃える

align-items:stretch;(初期値)

あ

い

う

え

お

<div style="display:flex; align-items:stretch">
  <div style="height:3rem">あ</div>
  <div style="font-size:0.5rem">い</div>
  <div style="height:6rem;font-size:2rem">う</div>
  <div>え</div>
  <div>お</div>
</div>

align-items:flex-start;

あ

い

う

え

お

<div style="display:flex; align-items:flex-start">
  <div style="height:3rem">あ</div>
  <div style="font-size:0.5rem">い</div>
  <div style="height:6rem;font-size:2rem">う</div>
  <div>え</div>
  <div>お</div>
</div>

align-content:flex-end;

あ

い

う

え

お

<div style="display:flex; align-items:flex-end">
  <div style="height:3rem">あ</div>
  <div style="font-size:0.5rem">い</div>
  <div style="height:6rem;font-size:2rem">う</div>
  <div>え</div>
  <div>お</div>
</div>

align-content:center;

あ

い

う

え

お

<div style="display:flex; align-items:center">
  <div style="height:3rem">あ</div>
  <div style="font-size:0.5rem">い</div>
  <div style="height:6rem;font-size:2rem">う</div>
  <div>え</div>
  <div>お</div>
</div>

align-content:baseline;

あ

い

う

え

お

<div style="display:flex; align-items:baseline">
  <div style="height:3rem">あ</div>
  <div style="font-size:0.5rem">い</div>
  <div style="height:6rem;font-size:2rem">う</div>
  <div>え</div>
  <div>お</div>
</div>

フレックスアイテムのプロパティ

flex-basis: flex-basis:アイテムの大きさ;
アイテムの基底となる大きさ[auto(初期値),em,rem,px,%など]。auto以外の値を指定したときはwidthやheightに優先する。

flex-basis:[あ-auto、い-2rem、う-40px、え-25%、お-auto]

あ

い

う

え

お

<div style="display:flex">
  <div style="flex-basis:auto">あ</div>
  <div style="flex-basis:2rem">い</div>
  <div style="flex-basis:40px">う</div>
  <div style="flex-basis:25%">え</div>
  <div style="flex-basis:auto">お</div>
</div>
order: order:順番;
ボックスを並べる順番を指定

order:[あ-3、い-1、う-4、え-5、お-2]

あ

い

う

え

お

<div style="display:flex">
  <div style="order:3">あ</div>
  <div style="order:1">い</div>
  <div style="order:4">う</div>
  <div style="order:5">え</div>
  <div style="order:2">お</div>
</div>
flex-grow: flex-grow:拡張比率;
コンテナが広がったときに拡大される比率

0のときは大きさ固定。初期値は0。

指定なし

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex">
  <div">あ</div>
  <div">い</div>
  <div">う</div>
  <div">え</div>
  <div">お</div>
</div>

flex-grow:[あ-0、い-0、う-0、え-0、お-0]

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex">
  <div style="flex-grow:0">あ</div>
  <div style="flex-grow:0">い</div>
  <div style="flex-grow:0">う</div>
  <div style="flex-grow:0">え</div>
  <div style="flex-grow:0">お</div>
</div>

flex-grow:[あ-1、い-1、う-1、え-1、お-1]

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex">
  <div style="flex-grow:1">あ</div>
  <div style="flex-grow:1">い</div>
  <div style="flex-grow:1">う</div>
  <div style="flex-grow:1">え</div>
  <div style="flex-grow:1">お</div>
</div>

flex-grow:[あ-3、い-1、う-4、え-5、お-2]

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex">
  <div style="flex-grow:3">あ</div>
  <div style="flex-grow:1">い</div>
  <div style="flex-grow:4">う</div>
  <div style="flex-grow:5">え</div>
  <div style="flex-grow:2">お</div>
</div>

flex-grow:[あ-3、い-1、う-4、え-5、お-2]

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex;flex-direction:column">
  <div style="flex-grow:3">あ</div>
  <div style="flex-grow:1">い</div>
  <div style="flex-grow:4">う</div>
  <div style="flex-grow:5">え</div>
  <div style="flex-grow:2">お</div>
</div>
flex-shrink: flex-shrink:縮小比率;
コンテナが狭まったときに縮小される比率。

0のときは大きさ固定。初期値は1。

指定なし

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex">
  <div">あ</div>
  <div">い</div>
  <div">う</div>
  <div">え</div>
  <div">お</div>
</div>

flex-shrink:[あ-0、い-0、う-0、え-0、お-0]

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex">
  <div style="flex-shrink:0">あ</div>
  <div style="flex-shrink:0">い</div>
  <div style="flex-shrink:0">う</div>
  <div style="flex-shrink:0">え</div>
  <div style="flex-shrink:0">お</div>
</div>

flex-shrink:[あ-1、い-1、う-1、え-1、お-1]

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex">
  <div style="flex-shrink:1">あ</div>
  <div style="flex-shrink:1">い</div>
  <div style="flex-shrink:1">う</div>
  <div style="flex-shrink:1">え</div>
  <div style="flex-shrink:1">お</div>
</div>

flex-shrink:[あ-3、い-1、う-4、え-5、お-2]

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex">
  <div style="flex-shrink:3">あ</div>
  <div style="flex-shrink:1">い</div>
  <div style="flex-shrink:4">う</div>
  <div style="flex-shrink:5">え</div>
  <div style="flex-shrink:2">お</div>
</div>

flex-shrink:[あ-3、い-1、う-4、え-5、お-2]

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex ;flex-direction:column">
  <div style="flex-shrink:3">あ</div>
  <div style="flex-shrink:1">い</div>
  <div style="flex-shrink:4">う</div>
  <div style="flex-shrink:5">え</div>
  <div style="flex-shrink:2">お</div>
</div>
flex: flex:flex-grow flex-shrink flex-basis;
3つのプロパティをこの順に指定する。

flex:[あ-0 1 auto、い-0 1 auto、う-0 1 auto、え-0 1 auto、お-0 1 auto]

あ

い

う

え

お

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex">
  <div style="flex:0 1 auto">あ</div>
  <div style="flex:0 1 auto">い</div>
  <div style="flex:0 1 auto">う</div>
  <div style="flex:0 1 auto">え</div>
  <div style="flex:0 1 auto">お</div>
</div>

flex:[あ-3 3 auto、い-1 1 auto、う-4 4 auto、え-5 5 auto、お-2 2 auto]

あ

い

う

え

お

あ

い

う

え

お

あ

い

う

え

お

<div style="display:flex">
  <div style="flex:3 3 auto">あ</div>
  <div style="flex:1 1 auto">い</div>
  <div style="flex:4 4 auto">う</div>
  <div style="flex:5 4 auto">え</div>
  <div style="flex:2 2 auto">お</div>
</div>