[B! flexbox] uraraiのブックマーク

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説

CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。 Flexboxが適してる場合、CSS Gridが適している場合、また両方を使用する場合、さまざまなレイアウトの問題を正しく解決する方法を紹介します。 Grid vs. Flexbox: Which should you choose? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ページ全体のレイアウト隙間が必要なレイアウト 1次元と2次元のレイアウトラッパー CSS Gridは将来、Flexboxを時代遅れにするでしょうか？ページ全体のレイアウト CSS Gridはコ

urarai 2018/09/28

リンク

Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld

一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-it emsなど）を指定している場合があります。それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。表示確認のデモはPCでの閲覧推奨です。要素を両端に寄せる特にヘッダーやフッターで利用

urarai 2018/05/28

リンク

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年の現状にあわせて、修正しました。【アップ

urarai 2018/05/28

リンク

日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

urarai 2017/03/31

リンク

Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説 -How Flexbox works

Flexboxの基本原則は、CSSでのレイアウトを柔軟かつ直観的にすることです。 Flexboxでどのようにレイアウトをつくるのか、Flexboxで最もよく使う5つのプロパティがどのように機能するのかをアニメーションで紹介します。 How Flexbox works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの基本「display: flex;」 flexコンテナの主軸の方向「flex-direction」 flexコンテナの主軸に沿って配置「justify-content」 flexコンテナの交差軸に沿って配置「align-it ems」 flexアイテムの整列「align-self」最後に Flexboxの基本「display: flex;」まずは、div要素を配置した例を見てください。「displa