flex– tag –

Flexboxでカードやメニューを横並びにすると、要素数によっては最後の1列だけ余白が目立つことがあります。特に、1行あたりの表示数が決まっているレイアウトでは、最終行が中央寄せのように見えてしまい、「左端からきれいに並べたい」と感じる場面がよく...

flexboxで左右の端に要素を配置したいときは、justify-contentを使うのが基本です。ナビゲーションメニュー、ボタンの並び、ヘッダー内のロゴとリンクの配置など、Web制作ではよく登場する場面です。まずは、「justify-contentは横方向の配置を決めるプロ...

Flexboxを使ってレイアウトを組むと、HTMLの並び順はそのままに、見た目だけ順番を入れ替えたい場面があります。そんなときに役立つのがorderプロパティです。たとえば、スマホでは画像を上に、PCではテキストを先に見せたいといった調整も、HTMLを大きく...

flexboxを使うと、子要素の配置を直感的に整えられます。なかでもよく使うのが、子要素を縦方向の中央にそろえる方法です。ヘッダーやカード、ボックス内のテキスト配置など、実務でも出番の多い基本テクニックなので、仕組みと書き方をあわせて押さえてお...

Flexboxでレイアウトを組むとき、「要素同士の間隔をきれいにそろえたい」と思うことは多いはずです。これまではmarginで調整する方法が一般的でしたが、最近はgapを使うことで、よりシンプルに間隔を指定できるようになりました。 この記事では、flexbox...

サイトのグローバルメニューやナビゲーションバーを作るときによく使われるのが横並びのメニューです。 flexboxを活用すると、複雑な調整なしに簡単に横並びレイアウトを実現できます。少し前は、横並びレイアウトに floatを使用していましたが、現在はCSS...