Flex-box

2016-05-06

親指の骨を鳴らしすぎて痛い氷翠です。

HTML5が浸透してきてだいぶ経過しました。
ということは、一般的なブラウザのバージョンも上がってきてることは明白。
さらに、Googleでも古いバージョンの切り捨てとかもありました。

今回はCSS3のことですが、以前から使える「Flex-box」というプロパティがあったのですが、使えるブラウザ、使えないブラウザがあって見送っていました。
しかし、最近になって古いブラウザを使っている人も少なくなり、そろそろかなと。

そこで勉強し直し。

どのようなものかというと、DIVのようなブロック要素の中に、複数のブロック要素がある。
親ブロックと子ブロックとしましょう。
親ブロックの中に子ブロックが入っている状態を浮かべてください。
で、通常、HTMLは上から下に流れていくものです。
しかし、これを横並びにすることができる。

今までだと、「float」プロパティで制御していましたが、本来、このfloatとは回り込みを指すものです。
文章構造を重視している現在ではレイアウトの方法として使うのは適切ではありません。
また、DIVなどのブロック要素の中で表組、つまりtable属性を持たせることも可能ですが、これもレイアウトに用いるのは、本来適切なものではありません。
そこで登場したのが、この「Flex-box」というわけです。

子のブロックを横並びにすることが可能で、子のブロックに番号を付けることで、その順番を入れ替えることも可能。
非常に優れものです。

現在、氷翠はワードプレスのテーマを作成するにあたり、レイアウトを考えているところでした。
で、これを使うということを前提にしていくと、いろいろと問題が解決されていくので、非常に便利です。