タグ

flexに関するtomono-blogのブックマーク (3)

  • Flexboxを使いこなして柔軟過ぎるCSSレイアウトを実現しよう。

    毎朝アクセス解析を見ていると、IE8 以前のバージョンからの流入が激減しており、喜びを隠せない日々を過ごしています。 実際、クライアント先の学習塾の 4 月から 7 月の IE だけの平均を見ると、IE9 が 10%、IE11 が 75%、残りが IE7、8、10 という割合です。そして、IEでの流入数が減った分、モバイルからの流入が増え続けており、モバイル率が 7 割近くまで上がりました。 古いブラウザの割合が減ることは、Web制作者にとっては嬉しいことで、対応する時間が大幅に減ります。そして、対応ブラウザのバージョンが上がると、Flexbox だって使えるようになります。(←前置き長い) FlexboxがCSSレイアウトを楽にするこのサイトは、IE9 以下からの流入が 3% 未満なので、完全に無視して CSS レイアウトは Flexbox を使っています。Flexbox は CSS3

    Flexboxを使いこなして柔軟過ぎるCSSレイアウトを実現しよう。
  • CSS3のFlexboxでグリッドレイアウトしてみる

    CSS3のFlexboxでグリッドレイアウトしてみる Flexboxベースのグリッドシステムもいろいろで出てきている昨今でありますが、整理も兼ねて一度挑戦してみたいと思います。 投稿日2017年02月28日 更新日2017年04月25日 単純な横並び row というクラスの div の中に col というクラスの div を並べます。 クラスの命名には行を表す row と、列を表す col がよく使われています。 HTML <div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div> CSSは row に display:flex を指定します。 col の width は 100% にします。 CSS .row { display: fle

    CSS3のFlexboxでグリッドレイアウトしてみる
  • 「出会えたことに感謝したいCSSベスト3」まとめ

    スダ氏 @sudarexyz 出会えたことに感謝したいCSSベスト3 1位 display: flex; 2位 box-sizing: border-box; 3位 height: 100vh; 2018-04-07 21:44:27 スダ氏 @sudarexyz justify-content: space-between; align-items: center; この辺も入れたかったけど全部FlexBox関係になっちゃうし、ランキングは今着手している案件に強く依存してる。 他の人のも見てみたい。 #出会えたことに感謝したいCSSベスト3 2018-04-07 22:02:07

    「出会えたことに感謝したいCSSベスト3」まとめ
  • 1