次に、コーディングの特訓です。
ブログにて学んだことをまとめていこうと思います。

flexboxでレイアウトをする

一度に全部は覚えられないので、パーツ別に覚えて行こうという作戦。
今日はFlexboxの勉強です。

覚えたことは自分の文章で書く。

横並びの方法は、従来のコーディングではfloat:leftで実現されていました。
これはHTMLに対して浮かせて表示させていたので、下にあるHTMLが入り込んで思わぬところに文字列などが入り、デザイン崩れが発生してしまうという現象があった。
※tableタグで並べるのは論外

この横並びなどのソートを簡単に実現したものが、Flexbox。

自分で描いたイラスト使って横並び機能を実現してみました。

Flexbox 使い方 CSS3

子要素の並ぶ方向の設定 flex-direction

親要素に対して、display:flex; をかけます。
子要素の並びを変えたいときはflex-directionを追記します。左端の子要素を基準として並ぶ方向を設定する。

directionの意味は方向です。英語苦手なので、英語も調べながら練習します。読み方も分からないのがたまにあります^^;
子要素自身に並びに関してのスタイルは何もかけません。

子要素の水平方向の並びを設定 justify-content

親要素に対して、display:flex; をかけます。
子要素の並びを変えたいときはjustify-contentを追記します。親要素の左端を基準として並ぶ方向を設定する。

justifyの読み方はジャスティファイ、かっこいい読み方だなぁ。。意味は、「正当化する」。
正当化?よくわからなない。

ジャスティファイ、ジャストティファイ・・ジャストファイ、JUST(ちょうど) + IFY(…にする、…化する)

ほんと横文字苦手!
ブラッシュアップとか日常では使わない用語、英語。覚えて行こう。
そしてエメット機能に頼っていると、スペルが打てなくなる…。