staffflexboxは複雑なウェブページやウェブアプリを製作するにあたりとても便利なレイアウトモジュールです。flexboxを使用するにはflexコンテナーが不可欠であり、CSSで[display:flex]と指定すれば要素をflexコンテナーとして扱うことができるようになります。flexコンテナーの子要素のことをflexアイテムと言いますが、flexコンテナーの子要素であれば自動的にflexアイテムとして扱われるので特別に指定する必要はありません。ブロック要素のflexコンテナーを作成する。インライン要素のflexコンテナーを作成する。flexアイテムがflexコンテナー内で『どの方向に向かって並ぶか』ということを指定します。flexコンテナーに入りきらないflexアイテムを、『そのまま一行で表示するか、折り返して複数行にするか』を指定します。flex-direction、flex-wrapの値をまとめて指定することができます。flex-flow:【flex-directionの値】【flex-wrapの値】;という形で指定します。指定した要素の大きさの比率を伸長させることができます。flex-grow:の形で数字を指定します。以下の例の場合、指定した要素とその他の要素の大きさの割合は3:1:1となる。指定した要素の大きさの比率を縮小させることができます。flex-shrinkはflex-wrap:nowrapと同時に使用しないと効果がありません。負の値は指定できません。以下の例の場合、指定した要素とその他の要素の大きさの割合は1:3:3となる。横幅、縦幅の比率を固定できます。flex-directionがrow、row-reverseのときは横幅を、column、column-reverseのときは縦幅を固定します。値として指定できるのは数値もしくは初期値であるautoのみで、負の値は指定することができません。flex-grow、flex-shrink、flex-basisの値をまとめて指定することができます。flex:【flex-growプロパティの値】【flex-shrinkプロパティの値】【flex-basisプロパティの値】;という形で指定します。現時点では、日本で最も使用率の高いIE11(約15%)に対応できていないため、日本人向けのサイトを作成するためにflexboxを使うのは非推奨です。今後IEへの対応やその他の不都合も改善されていくと思われるので、もうしばらく様子を見るのが良いでしょう。コメントをキャンセルメールアドレスが公開されることはありません。