「display:flex」がすごい使いやすい。
公開日：
最終更新日：
要約
本記事では、従来の「display:block」「display:inline-block」や「display:table」を使った手間のかかるWebレイアウト方法に比べて、「display:flex」がいかに使いやすく効率的かを紹介しています。要素の等間隔配置や縦方向の並べ方が簡単にでき、CSS作成の時間短縮につながる利点を具体例とともに解説。初心者にも優しいFlexboxの基本プロパティの説明や参考サイトも紹介しています。
「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）からはみ出す場合，
（スクロールを設けたい場合）
どのようにするか，が問題です。
＊要素を横並びに，続けて配置したいです。
やってみたら，案外簡単にクリアできるかもしれません。
以上，覚え書きでした。