タグ

flexboxとcss3に関するzepbagのブックマーク (2)

  • CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス

    CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ

    CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
  • CSS Flexible Box Layout Moduleで均等幅にレイアウトする - くらげだらけ

    最近ではベンダープレフィックスも無くす方向に向かっているようですね。 数年前に比べればCSS3プロパティも使えるような状況になってきているような気がします。いや気がしているだけかもしれません。 まぁ、現状webkitが支配しているモバイルブラウザ環境ではCSS3だって使えますしね。 display: box 横幅を均等に分けてレイアウトしたいみたいなときにFlex boxは便利なプロパティですが、どんな感じにするのがいいのかを書いてみようと思います。 Flexible Boxの仕様はころころ変わってて、最初は「display: box」最新は「display: flex」だったりしますが、まずは「display: box」でやってみます。 http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ <div class="flex-box"> <

    CSS Flexible Box Layout Moduleで均等幅にレイアウトする - くらげだらけ
  • 1