「display:flex」がすごい使いやすい。

 2021年12月9日

「display:flex」で何ができるか

今まで,WEBのレイアウトには,

Bootstrap」を使っていたのであまり気にしなかったのですが,

Bootstrapを使わずに,CSSを直うちする場合,

「display:block」と「display:inline-block」を駆使したり,

最近は「display:table」を組み合わせたりしていました。

しかし,そんな面倒な手順より「display:felx」による指定が一番楽だと本日知りました。

例えば,下のような作業も簡単に指定できます。

・要素を等間隔に横並びにする
 → inline-block で,%を指定する必要がない。

・要素を縦で等間隔に並べることが出来る。
 →ややこしいCSSを書く必要がない。

なぜ,今まで「display:flex」を使わなかったのか,

時間を大分無駄にしました。

詳しい使い方を簡単に説明しているサイトはこちらです。

日本語対応!CSS Flexboxのチートシートを作ったので配布します

とくに覚えておくと楽なプロパティ

・flex-direction

子要素の並び順です。
(子要素は display:flexである必要はない)

・justify-content

均等割など,配置の仕方です。

あとは,親要素(flex)からはみ出す場合,

(スクロールを設けたい場合)

どのようにするか,が問題です。

*要素を横並びに,続けて配置したいです。

やってみたら,案外簡単にクリアできるかもしれません。


以上,覚え書きでした。