!ラフクリとはAboutホーム/ブログWEBLOGフォトギャラリPhotographポートフォリオPortfolioお問い合わせMailformdisplay:flexでカラムを組もう!2014/10/19Web制作CSSFacebookTwitterLINEPocketメールアドレスこの記事は覚え書きの殴り書き・メモです。説明としては不十分で、解釈の間違いなども十分に考えられますのでご注意くださいCSSでカラムを組む方法というと、パッと3種類が浮かびます。・float:leftとclear:left・display:inline-block・tableただどれもちょっとずつ癖があって、毎度どう実装するか頭を抱える部分だったりします。具体的に言うと以下の例です。display:flex■float・親要素にoverflow:hiddenを当てないと高さが取れない。・直後の要素にclearを当てる必要がある。・3カラムを組むには要素の入れ子を作らなければいけない■display:inline-block・inline-blockの要素間に改行や半角スペースが入ると、ブラウザでの表示に反映されて隙間が生じる・inline-blockの幅をカッチリ決めないと予期せぬカラム落ちが起きる・カラムごとに高さがバラバラになる(高さが揃わない)■table・昔懐かしいテーブルレイアウト・強制的に横並びになる=画面幅が狭いとはみ出る(柔軟性がない)display:inline-blockの隙間問題なんかは誰得だよ、もはやブラウザのバグとして扱っていいんじゃないのかとか考えたりするくらい厄介の種なんですが、いろいろ調べてみたところ、CSS3でカラムを組むためのプロパティが定義されていました。display:flexもう名前からしてすごく柔軟性がありそうです。こいつなかなか優秀みたいで、親要素にdisplay:flexを与えると、その直下にある子要素をすべてカラムレイアウトとして組んでくれます。</div></section>上記の例なら、横に3つ、均等な幅を持ったdiv要素が形成される、と。section自体に幅が変わると、中のdivもそれに応じて自動で伸縮して横並びを維持してくれます。サイドバーの幅だけ固定して、メインカラムは残りの最大幅に。みたいなこともこれならラクラクです。このプロパティの1つ厄介なところは、その名前がコロコロと変わってきた経緯があって、ベンダープレフィックスを指定しておかないとブラウザによっては機能しないケースがあるようです。display:-webkit-box;display:-webkit-box;display:-ms-flexbox;display:flex;子要素の並び順もHTMLの記述順に関係なく並べ変えが可能で、orderというプロパティの値が小さいものほど左に来ます。関連するプロパティはたくさんあるようですが、とりあえず以上のことだけおさえておけば簡単なカラムづくりには応用できそうです。display:flexスポンサーリンクなかのひと:タカヒロAuthor:Takahiro都内でウェブデザイナーとして勤務する、1992年生まれのデジタルネイティブ。写真を撮ったり撮られたり、クロスバイクに乗っておいしいものを探しに出かけたりしながら日々を過ごします。メッセージフォームMessageform内容をご確認のうえ、チェックを入れて送信するボタンを押してください。お返事が必要なご連絡は別途お問い合わせフォームよりお送りください。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。