直近の記事一覧
フジロックの kraftwerk の演奏に対する批判記事 (24年7月29日)
迷惑メールの送信元 (24年6月14日)
東横イン蒲田1はロビーがない (24年4月30日)
MacBookAir所感 (24年4月29日)
$1499は高い (24年4月28日)
今まで,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)からはみ出す場合,
(スクロールを設けたい場合)
どのようにするか,が問題です。
*要素を横並びに,続けて配置したいです。
やってみたら,案外簡単にクリアできるかもしれません。
以上,覚え書きでした。
投稿記事のカテゴリやタグと同じ記事をランダム表示します。