2017年12月13日 きなこきなこ

この記事はOthloTech Advent Calendar 2017の13日目の記事です。

こんにちは。あすかです。
jackではきなこと呼ばれています。

今回はwebページなどを作るときにとっても便利なFlexboxについて紹介します。


Flexboxとは


ざっくり言うと、CSS3でかんたんにレイアウトが作れる機能です。

FlexboxはFlexコンテナ(親)でFlexアイテム(子)を入れることで使うことができます。
図にするとこんな感じ

Flexbox図

親要素にdisplay:flexと書いて、cssをいじってあげるだけです。
とってもかんたんに出来ちゃいますね!


オススメのFlexコンテナ


今回はFlexコンテナの中でもオススメの3つを紹介します。
実際に動かすアイコンはこちらのFLAT ICON DESIGNさんからお借りしました。

HTMLはこんな感じ


<div class="parent">
<div class="child">
<img src="image/image1.svg">
あざらし1
</div>
<div class="child">
<img src="image/image2.svg">
あざらし2
</div>
<div class="child">
<img src="image/image3.svg">
あざらし3
</div>
</div>

これをベースにして、Flexboxを使ってあざらしをいろんな配置にしてあげます。
デモサイトはこちら


justify-content:space-around


justify-contentはアイテムの水平方向の並びをいじれるFlexコンテナです。
個人的に1番よく使ってます(笑)

justify-contentの種類はこんな感じ


  • flex-start : 左揃え(デフォルト)

  • flex-end : 右揃え

  • center : 中央揃え

  • space-between : 端までめいっぱい均等配置

  • space-around : 普通に均等配置 ☆今回紹介するのはこれです

justify-content:space-around

LPとかでよく見るこんな配置を作ってあげることも簡単に出来ちゃいますよ!

↓コードはこんな感じ↓

ruby:justify-content:space-around
.parent{
display: flex;
justify-content: space-around;
background-color: #ffe9ef;
padding: 2em;
}
.child{
background-color: #ffd9e4;
margin: 0 1em;
}

わかりやすいように親要素・子要素それぞれに背景をつけてあげました。
今回は背景がわかりやすいように子要素にもpaddingをつけましたが、普通に使うときはいらないと思います。
お好みでmarginを付けてあげるといい感じの間隔で配置できますよ!


flex-direction:row-reverse


flex-directionはアイテムの並び順と向きをいじれるFlexコンテナです。

flex-directionの種類はこんな感じ


  • row : 横並びで左から始まる(デフォルト)

  • row-reverse : 横並びで右から始まる ☆今回紹介するのはこれです

  • column : 縦並びで上から始まる

  • column-reverse : 縦並びで下から始まる

flex-direction:row-reverseナビとかで右揃えにしたいときとかに使えるんじゃないでしょうか?

↓コードはこんな感じ↓

ruby:flex-direction:row-reverse
.parent{
display: flex;
flex-direction:row-reverse;
background-color: #ffe9ef;
padding: 2em;
}
.child{
background-color: #ffd9e4;
margin: 0 1em;
}

float:rightでも逆向きに配置することは出来るのですが、こっちの方がコードの量が少なくてスマートです。
今までfloatしか使ったことないって人はぜひ使ってみてください


align-items:center


align-itemsはアイテムの並び順と向きをいじれるFlexコンテナです。

align-itemsの種類はこんな感じ


  • stretch : 子要素の大きさは子要素の縦幅いっぱい、上揃え(デフォルト)

  • flex-start : 子要素の大きさはアイテムと同じ、上揃え

  • flex-end : 子要素の大きさはアイテムと同じ、下揃え

  • center : 子要素の大きさはアイテムと同じ、中央揃え ☆今回紹介するのはこれです

  • baseline : 子要素の大きさはアイテムと同じ、ベースラインに沿うように配置

デフォルト(align-items:stretch)がこんな感じ

align-items:stretchあざらしたちが真ん中に並んでくれましたね!

↓コードはこんな感じ↓

ruby:flex-direction:row-reverse
.a{
width: 30%;
}
.b{
width: 50%;
}
.c{
width: 20%;
}
.parent{
display: flex;
align-items: center;
background-color: #ffe9ef;
padding: 2em;
}
.child{
background-color: #ffd9e4;
margin: 0 1em;
}

画像のサイズがそのままだとわかりづらかったので、子要素1つずつの大きさをわざとバラバラにしています。
大きさが違うものをきれいに並べてあげたいときに活躍してくれますね。


Flexboxを試してみよう


わざわざ自分で1から作って練習するのは面倒くさいよ…っていう人のためにあるとても便利なサービスを紹介します。
どちらも無料で誰でも出来るので、興味のある方はぜひ遊んでみてください!


Flexbox-Playground

Flexbox-Playground大きさなどをポチポチ設定するだけでFlexboxのレイアウトを試すことができます。
Flexbox-Playgroundはこちら


FlexboxFroggy

FlexboxFroggy可愛いカエルくんを蓮の葉の上に乗せてあげるだけで、Flexboxの書き方を勉強出来ます。
FlexboxFroggyはこちら


さいごに


Flexboxの機能は今回紹介したもの以外にもたくさんあるので興味がある人は調べてみてください。

また、これをきっかけにいろんな人にFlexboxを使ってもらえたら嬉しいなと思います。
最後まで見てくださってありがとうございました!