floatなんてわからんって！
こんにちは、AKデザインの円盤です。
HTMLが始まったwindows95から98の頃からcenterとfontとtableで生きてきたのですが
CSSが始まってfloat設定してボックスを横並びにするのが初心者脱落の第一歩だったのを今でも記憶していますｗ
カラム落ちっていう言葉があるんですが、いまだに僕はfloatの設定方法をよくわかっていませんｗ
flexboxの登場
ということでその部分がわからないまま、display:tableとtable-cellでHTMLのtableの延長を駆使して表現してきたんですが
ある日flex-boxの存在を知ってしまったわけです。
色々flexboxのまとめサイトを見ましたけれど、ここが一番参考になったのでリンク載せておきます。
https://www.plusdesign.co.jp/blog/?p=8747
見てもよくわからんのだが！
って最初は僕も思いましたよ。
例えば下記のような場面が出てくることがあります。ええ、よくあります。
こんな場面も多々出てきます。
というか最近はこれがほとんどです。
これをしたい時に便利なのがflexboxです。
<div class="親"> <div class="子供">1</div> <div class="子供">2</div> <div class="子供">3</div> <div class="子供">4</div> </div>
CSSはこんな感じ
■まずは指定
.親 {display: -webkit-flex;display: flex;}
上記のを宣言しないと動かないので注意。
■横に並べたい場合
.親 {-webkit-flex-direction: row;flex-direction: row;}
■縦に並べたい場合
.親 {-webkit-flex-direction: column;flex-direction: column;}
で、これらをmedia widthで979px以下と980px以上で別々に指定したら縦並び・横並びの切り替えが完了します！
ついでに979px以下になったら「.子供」の幅を100%とかにしてあげればスマホのページっぽくなります。
どうです？簡単でしょー？
他にもrowやcolumnのところをcolumn-reverseとか色々変えたら逆からスタートとかもできますよ！
floatでは結局どうやるのん？
floatでやる方法はいまだによくわかっていませんｗ
（横幅を超えるとカラム（column）から落ちるのでカラム落ちという言葉の意味は分かっておりますがｗ）
flexboxが出る前の指定方法はどうやってたんでしょうかね。
webデザイン系のテキストには書いてありますけど 、回り込みを防ぐためのclear:both;とかもう覚えなくてもいいのでは？
そもそも浮いてしまう（float）ので、浮いた分高さも指定してあげないとでやっていくとわけわからんようになっていきますよねｗ
昔々のflexboxに対応していないブラウザはfloat使うしかない？いや、もう古いブラウザはあんまし気にしていませんよｗ
IEも2020年に10から順番にサポート終了していきますからね。さらばIE。もう最近はほとんど表示確認してませんよ！
（お客さんにIEで最適化してほしい、という方はまだ現れていないので助かっているだけともいいますがｗ）
