CSS Flexible Box Layout Module のサンプルページ001

内容

flexbox というHTMLの要素があるわけではない。
CSSの属性として用意されている。

Flexbox の使い方

ある要素に display: flex を指定する（または display: inline-flex）。
flex-direction プロパティで主軸を指定する。
主軸方向の配置方法を justify-content プロパティで指定する。
交差軸方向の配置方法を align-content, align-self / align-items プロパティで指定する。
etc.

参考

なにもCSSを書かない場合

HTML

<div>
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

なし

結果

いち

にい

さん

メモ

divはブロックなので縦に並ぶ。

displayプロパティ

display: flex とした場合

HTML

<div class="flex1">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex1 {
  display: flex;
}

結果

いち

にい

さん

メモ

横に並ぶようになる。
余分な幅もとらない。

display: inline-flex とした場合

HTML

<div class="flex2">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex2 {
  display: inline-flex;
}

結果

いち

にい

さん

メモ

inline-flex は、flex コンテナを極小のインラインレベル要素する。
なので、この div の前に何か文字があった場合などは、右側に表示される。

flex-direction プロパティ

flex コンテナの主軸（main axis）や方向 (normal または reversed) を定義する。
デフォルト値は row。

参考

flex-direction: row-reverse とした場合

HTML

<div class="flex3">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex3 {
  display: flex;
  flex-direction: row-reverse;
}

結果

いち

にい

さん

メモ

水平方向全体が逆になる。
フレックスアイテムが逆になるが、それだけでなく右詰めになる。

flex-direction: column とした場合

HTML

<div class="flex4">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex4 {
  display: flex;
  flex-direction: column;
}

結果

いち

にい

さん

メモ

上から下への順番になる。

flex-direction: column-reverse とした場合

HTML

<div class="flex5">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex5 {
  display: flex;
  flex-direction: column-reverse;
}

結果

いち

にい

さん

メモ

下から上への順番になる。

justify-content プロパティ

flex アイテム間の配置関係をどうするか指定する（水平方向）。

参考

justify-content: center とした場合

HTML

<div class="flex6">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex6 {
  display: flex;
  justify-content: center;
}

結果

いち

にい

さん

メモ

flex アイテムが中央に集まる。

justify-content: center & flex-direction: column とした場合

HTML

<div class="flex6a">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex6a {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

結果

いち

にい

さん

メモ

flex-direction: column; で主軸がブロック方向になり、その主軸に対して justify-content: center; が効く。つまり、縦方向に対しての center 位置となる。

justify-content: left とした場合

HTML

<div class="flex7">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex7 {
  display: flex;
  justify-content: left;
}

結果

いち

にい

さん

メモ

flex アイテムが左に集まる。
justify-content: flex-start とはどう違う？

justify-content: space-between とした場合

HTML

<div class="flex8">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex8 {
  display: flex;
  justify-content: space-between;
}

結果

いち

にい

さん

メモ

flex アイテムが均等に配置される。

align-items プロパティ

flex アイテム間の配置関係をどうするか指定する（垂直方向）。

参考

align-items: flex-start とした場合

HTML

<div class="flex9">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex9 {
  display: flex;
  align-items: flex-start;
}

結果

いち

にい

さん

メモ

縦方向の開始位置が揃えられる。

align-items: center とした場合

HTML

<div class="flex10">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex10 {
  display: flex;
  align-items: center;
}

結果

いち

にい

さん

メモ

縦方向の中心位置が揃えられる。

order プロパティ

flex アイテムの順序を指定する。
flex アイテム毎に自由に順番を指定することができる。

参考

order で flex アイテムを逆順にした場合

HTML

<div class="flex11">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex11 {
  display: flex;
}
.flex11 > div:nth-child(1) {
  order: 3;
}
.flex11 > div:nth-child(2) {
  order: 2;
}
.flex11 > div:nth-child(3) {
  order: 1;
}

結果

いち

にい

さん

更に別の順番で並べてみる

HTML

<div class="flex12">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex12 {
  display: flex;
}
.flex12 > div:nth-child(1) {
  order: 2;
}
.flex12 > div:nth-child(2) {
  order: 3;
}
.flex12 > div:nth-child(3) {
  order: 1;
}

結果

いち

にい

さん

メモ

自分で順番を指定することができる。

flex-grow プロパティ

flex アイテムが flex コンテナ内のスペースをどれくらい占有するか指定する。
flex アイテムに対して指定する。
flex アイテム同士での相対的な値を指定する。
初期値は0。スペースを取らない。
全ての flex アイテムの flex-grow 合計値が 1を超えない場合は、全体のスペースを 1としてそれに対してそれぞれの割合の分だけスペースが分配される？
全ての flex アイテムの flex-grow 合計値が 1を超える場合は、それぞれの flex-grow 値の相対的な割合でスペース全体が分配される？

参考

すべての flex アイテムで、flex-grow: 1 とした場合

HTML

<div class="flex13">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex13 {
  display: flex;
}
.flex13 > div:nth-child(1) {
  flex-grow: 1;
}
.flex13 > div:nth-child(2) {
  flex-grow: 1;
}
.flex13 > div:nth-child(3) {
  flex-grow: 1;
}

結果

いち

にい

さん

メモ

すべての flex アイテムで flex-grow: 0 にするとスペースはなくなる。

flex アイテムによって、flex-grow の値を変えた場合（その1）

HTML

<div class="flex14">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex14 {
  display: flex;
}
.flex14 > div:nth-child(1) {
  flex-grow: .1;
}
.flex14 > div:nth-child(2) {
  flex-grow: .2;
}
.flex14 > div:nth-child(3) {
  flex-grow: .3;
}

結果

いち

にい

さん

メモ

スペース全体を1として、それに対して、0.1 : 0.2 : 0.3 の割合になるようだ。

flex アイテムによって、flex-grow の値を変えた場合（その2）

HTML

<div class="flex15">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex15 {
  display: flex;
}
.flex15 > div:nth-child(1) {
  flex-grow: 1;
}
.flex15 > div:nth-child(2) {
  flex-grow: 2;
}
.flex15 > div:nth-child(3) {
  flex-grow: 3;
}

結果

いち

にい

さん

メモ

指定した値が全て1以上の場合、スペース全体が、1:2:3 の割合で分配される。

flex アイテムによって、flex-grow の値を変えた場合（その3）

HTML

<div class="flex16">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex16 {
  display: flex;
}
.flex16 > div:nth-child(1) {
  flex-grow: .3;
}
.flex16 > div:nth-child(2) {
  flex-grow: .3;
}
.flex16 > div:nth-child(3) {
  flex-grow: .6;
}

結果

いち

にい

さん

flex-shrinkプロパティ

flex-shrink は CSS のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは flex-shrink の数値に従って縮小して収まります。
使用時は flex-shrink は flex-grow や flex-basis などの他のフレックスプロパティと共に使用され、ふつうは flex の一括指定を使用して定義されます。

参考

flex-shrink - CSS: カスケーディングスタイルシート | MDN

flex-shrink: 要素を並べてみる

HTML

<div class="flex18">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex18 {
  display: flex;
  width: 500px;
}
.flex18 div {
  flex-basis: 200px;
}
.flex18 > div:nth-child(1) {
  flex-shrink: 1;
}
.flex18 > div:nth-child(2) {
  flex-shrink: 1;
}
.flex18 > div:nth-child(3) {
  flex-shrink: 2;
}

結果

いち

にい

さん

メモ

要素は3つあり、それぞれ flex-basis (初期の寸法) で 200px であると指定している。
しかし全体の幅として 500px を指定しているので、100px 足りていない。
左の要素から順番に、flex-shrink として、1, 1, 2 を指定している。
足らない 100px が、1:1:2 の割合で3つの要素に分担される。つまり3つの要素はそれぞれ、25px : 25px : 50px だけ縮む。
なので、3つの要素の表示される幅は、左から 175px, 175px, 150px となる。

flex-wrapプロパティ

フレックスアイテムを横に並べるが、レスポンシブな動きになる。フレックスアイテムすべてが横に並ぶだけの幅がなければ、自動的に改行される。
溢れたフレックスアイテムを、上か下のどちらに積み重ねるかの指定も可能。

参考

flex-wrap - CSS: カスケーディングスタイルシート | MDN

flex-wrap: wrap とした場合

HTML

<div class="flex17">
  <div>いち</div>
  <div>にい</div>
  <div>さん</div>
</div>

CSS

.flex17 {
  display: flex;
  flex-wrap: wrap;
}

結果

いち

にい

さん

flex プロパティ

flex-grow, flex-shrink, flex-basis を同時に指定することができる。これらはどれも、flexコンテナに対して、それぞれの flex アイテムがどれだけのスペースを使うかを指定するプロパティである。
デフォルト値
- flex-grow: 0 (スペースをとらない)
- flex-shrink: 1 (スペースを縮小もしない)
- flex-basis: auto (基本となるスペースを指定しない)

参考

ソースコードはこちら

laboradian/css-flexbox-sample001