フレックスボックスに挑戦(Flexboxとは？)

★フレックスボックスとは？

フレックスボックスを使うと、従来のFLOATなどを使ったレイアウトより、少しだけ自由度が高い配置ができる。

※フレックスボックスを使うと、FloatをかけてあとでClearするための空の領域を作ったりする必要がない。

※古いブラウザでは対応していない場合が多い。（ただ、いい加減、そろそろ使っても良い頃？^^;)

---

大きさの異なる１０個の領域があるとして

(1)ブロック要素はただ配置しただけだと、すべて幅100%の縦並びになってしまう。

---

(2)子領域を全部インラインブロックにすると・・・

---

(3)子領域を全部float:left;にしてみると・・・

(※忘れずにclearしてあげないと親要素の高さが計算出来ませんね)

---

(4)しかし、flexbox を使えば、あら不思議・・・

これは便利かも(^^;)

---

まだ完全に理解したわけではないけれど、ちょっとだけ分かってきた

ポイントは

親要素に「display:flex;」を指定してやること。

大部分の指定は親要素だったんですねぇ・・・以前ちょっとだけ試してみた時にうまくいかなかったのは、一生懸命子要素にflexを指定していたからだったのか・・・ちゃんと説明を読まないから・・・(^^;)

基本的には、「display:flex;」を指定してやった親要素を用意してやれば、その中に入れる要素は何も指定しなくても自動的にフレックスアイテムになる。

（いくつか子要素に指定する必要があるスタイルもある)

上記の例では親要素のクラスを「smpl」、子要素のクラスを「item」として、このように指定されている

<style><!-- .smpl{ width:300px; border:2px solid blue; display:flex; flex-wrap: wrap; } .smpl .item{ flex-grow:1; margin:5px; border:solid 2px gray; background:cyan; } --></style>

マージン・パッド・枠線や色の指定はどうでもいいので削除すると

<style><!-- .smpl{ display:flex; flex-wrap: wrap; } .smpl .item{ flex-grow: 1; } --></style>

まず、親要素に「display:flex;」を指定して、次の「flex-wrap:wrap;」で、親要素の幅を超えるアイテムを改行させる指定をしている。（改行せず横にはみ出すようにもできるが意味ないですよね。。。）

それから、「flex-grow:1;」で、余白が出る場合、余白を100%埋めるように幅を拡張してくれる。

---

まだ理解してないことが多いけれど、これまでうまくレイアウトできなくて、諦めてブチ切れて「全部縦一列でいいや！」ってなってた事が多いのですが(笑)

もう少しレイアウトしやすくなるかも？