※回答一覧

 出題者   カテゴリ   作成日

阿部 正幸		 サーバー＆プログラミング 2016-10-28 18:37:36
 問題   ヒント   回答数 
■CSSレイアウトが簡単になるFlexboxとは?

IEにも対応し3度の仕様変更を経て今使えるようになってきたFlexbox。
FlexboxとはFlexible Box Layout Moduleのことで、その名のとおり柔軟なレイアウトを実現できるCSS3のレイアウトモジュールのことです。

2016年5月26日にW3Cでの勧告候補となっているFlexbox仕様がどのようなもので、どう利用できるのか。
今回はFlexbox最新動向についてまとめたいと思います。

1.Flexboxを知っていましたか?

2.すでに使っていますか?それとも勧告されるまで使用を待ちますか?

3.CSSでレイアウトが大変だった横並びがFlexboxでは簡単に制作することができます。他にもどんなレイアウトに利用したいと考えますか?		 1

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
0 yamataco
1.知りませんでした。
2.使っていないのですが、調べてみたら便利そうだったので試してみたいと思います。
3.垂直方向の中央揃えができるみたいなのでこれを使ってみたいと思っています。		 金 (阿部 正幸)
Flexboxは2016年5月26日に勧告候補となり仕様が確定し各ブラウザへの対応が進んでいます。 Flexboxのプロパティは多いと思われがちですが全部で12種類です。 ブロックの大枠に display : flexを指定したものがFlex containerで、その中がFlex Itemになります。 Flex containerと、Flex Itemにそれぞれ指定できるプロパティが決まっており、下記のとおりです。 [flex container] flex-flow (flex-direction、flex-wrap) justify-content align-items align-content [flex item] order flex（flex-grow、flex-shrink、flex-basis） align-self 意外と少ないので全プロパティ覚えると良いかと思います。 3.の解答ですが「垂直方向の中央揃えができるみたいなのでこれを使ってみたいと思っています。」も１つのFlexboxの特徴です。 それ以外にも並列に並べたBoxの高さを合わせたり、横幅、高さの分からないBoxの上下左右中央にテキストを置いたりと、これまでHTMLとCSSだけでは表現ができなかったことが簡単に表現できるようになっています。 言葉だけですとなかなか説明が難しいので、私がFlexboxのセミナーで使用しているスライドを共有させていただきます。 http://shared-blog.kddi-web.com/sandbox/flexbox-s/ 全プロパティのサンプルが載っていますので、参考にしてみてください。