実習二日目
企業実習の二日目が始まりました。フルカワです。
初日でもあった昨日は自分でも驚くぐらい時間の進みが速く、昨日中に終える予定だった自己紹介用のスライドも明日へ持ち越しとなってしまいました。
そして迎えた本日は、その持ち越したスライドを午前中に完成させ、昼休みを挟んだ午後からはドットインストールを用いて勉強することになりました。
今回はCSSのFlexboxについて復習し、より理解を深めることにしました。
CSS Flexboxとは
さて、CSS Flexboxとは、正式名称「CSS Flexible Box Layout」と言い、これまで実装が難しかった複雑なレイアウトをより簡単に実装することが可能になるというものです。(複雑なコードを書かなくても済むようになる）
「caniuse.com」で調べると、現時点ではほとんどのブラウザでサポートがされているということなので、気軽に使っていけるのではないかと思います。
個人的には「float」や「display」などのプロパティを使用してレイアウトを組み立てていくよりも、理解がしやすく簡単に扱えるものだと思います。訓練期間中の制作実習においても必要となる場面がいくつか出てくることがありました。
Flexboxの具体的な効果
要素内の縦横の配置が簡単に出来る
html内の要素の表示順序に関わらず、CSSだけで自由に表示順序を変更可能
要素間の幅の指定が柔軟になる
Flexboxの記述例
それではFlexboxの記述例を見ていきましょう。
まずhtmlを記述し、flexboxレイアウトを使用したい要素を指定します。
html
<div class=”container”>
<div class=”item”>item1</div>
<div class=”item”>item2</div>
<div class=”item”>item3</div>
<div class=”item”>item4</div>
</div>
css
.container { display:flex; }
上記のように、親要素のdisplayプロパティに「flex」を指定するだけで、flexboxレイアウトを使用する準備が整います。
※インライン要素に使用する場合は、「inline-flex」を指定します。
後はそれぞれ、flex container（親要素）に使用するプロパティ、flex item（子要素）に使用するプロパティを用いてレイアウトを構成していきます。
以下はflex boxレイアウトを使用する際、覚えておくと良い用語になります。
・flex container 親要素。flex itemをレイアウトしていくための領域。
・flex item 子要素。flex container内に置くコンテンツなど。
・flex-direction flex containerを定義すると設定されるプロパティ。子要素の並ぶ方向を指定する。default値はrow。左から右へ向かって並ぶ。
・main axis flex-directionに沿って作られる軸。flex itemはこれに沿って並ぶ。
・cross axis main axisに交差する軸。
まとめ
Flexboxレイアウトを使用するに当たり、前提となる知識は以上となります。
後は自分のしたいレイアウトによってプロパティを変えれば良いだけなので、非常に簡単にレイアウトを組むことが出来ます。
最後に、とあるウェブデザインの情報サイトのリンクを貼っておきます。
こちらで配布されているCSS Flexboxチートシートは非常に便利かつ分りやすく一枚にまとめられているので、是非見てみてください。