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

内容

Flexbox の使い方

  1. ある要素に display: flex を指定する(または display: inline-flex)。
  2. flex-direction プロパティで主軸を指定する。
  3. 主軸方向の配置方法を justify-content プロパティで指定する。
  4. 交差軸方向の配置方法を align-content, align-self / align-items プロパティで指定する。
  5. 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-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 プロパティ

参考

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 プロパティ

参考

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 プロパティ

参考

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-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 プロパティ

参考

ソースコードはこちら