直近の記事一覧
検索エンジンの「AI」による回答結果 (24年12月29日)
Webのシステムを変えた方が良いかな。 (24年11月28日)
Apple Intelligence (24年10月29日)
1011 (24年10月11日)
診療(10月8日) (24年10月8日)
今まで,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)からはみ出す場合,
(スクロールを設けたい場合)
どのようにするか,が問題です。
*要素を横並びに,続けて配置したいです。
やってみたら,案外簡単にクリアできるかもしれません。
以上,覚え書きでした。
投稿記事のカテゴリやタグと同じ記事をランダム表示します。