サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案(Editor’s Draft)を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案(Last Call Working Draft)が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
Firefox 18.0a(Nightly) で CSS Flexible Box Layout Module が実装されつつある。 その辺りは、FirefoxのFlexbox実装、進行中 - fragmentary 辺りを参照ってことで。 まぁともかく、about:config の値 layout.css.flexbox.enabled を true にすれば、少し試すことができる。 んで、Using CSS flexible boxes - CSS | MDN を読みつつ勉強。そのメモをば。 flex containerdisplay: flex; な要素。その子要素がflex itemとなり、フレキシブルなレイアウトを実現する。 レイアウトには主軸(main axis)となる方向がある。上図では横方向(row)のレイアウトになっている。この方向を決めるのが、flex-directio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く