Webエンジニア目指して#14

どうもLady Borden初購入マンです。食べたことなかったけど結構美味しいですね
しかしでかい、でかすぎる。カップル専用ですか？？？？

今回はHTML&CSSで新しくFlexboxなるレッスンが増えてたのでそれをやります
どうやらFloatを使って横にBoxを並べてたのが手軽になるみたい？

CSS

display:flex;

並べたい複数要素を包括する親セレクタに

これを指定すると横並びになる。 

flex:auto;

並べた要素にこれを指定すると、自動で親要素に合わせて幅を伸縮する。

flex-wrap:wrap;

並べる要素の親セレクタにこれを設定すると、並べる要素のセレクタにwidthを指定できるようになる。
レスポンシブデザインでよくやる要素を折り返して並べるやつですね。

親のwrapを指定しないとwidth指定できませんでした。

flex-direction:column;

並べる要素の親セレクタに指定して要素を並べる方向を変えます。columnがあるんでrowもありますと。
column-reverseのように逆から並べることも可。
まどろっこしくwidth:100%;とするよりかは、縦に並べるからflex-direction！とした方がわかりやすいかも知れませんね。並べる方向も指定できますし。

なお、これを指定するだけだと左端に要素が並んじゃうのでmargin:auto;が必要です。

こんなもんでした。Floatだと気を使うところが割とあるんで便利なスタイルですね

次こそjs！ではでは。