Webページのレイアウトを整えるうえで、CSSのFlexbox(フレックスボックス)は欠かせない存在となっています。従来のfloatやinline-blockに比べて、柔軟で直感的な配置が可能なFlexboxは、初心者でも扱いやすく、レスポンシブデザインにも強いのが特徴です。本記事では、Flexboxの基本的な使い方から、具体的なレイアウト例までをHTMLとCSSのコード付きで詳しく解説します。これからWeb制作を始める方や、CSS設計を見直したい方にぴったりの内容です。
Flexbox(フレキシブル・ボックス・レイアウト)は、CSS3から導入されたレイアウト方法で、親要素とその子要素に適用して使います。Flexboxは、一方向にアイテムを並べて、それを柔軟に配置するための仕組みです。
例えば、アイテムを横一列に並べたり、均等にスペースを分けたり、中央寄せにしたりといった操作が非常に簡単に行えます。
Flexboxの基本構造は次のとおりです:
.parent {
display: flex;
}
これだけで、.parent
要素内の子要素は横方向に並び始めます。
フレックスボックスで使う主なプロパティを紹介します。
display: flex;
flex-direction
row
(横並び・初期値)、column
(縦並び)justify-content
flex-start
, center
, space-between
, space-around
align-items
stretch
, center
, flex-start
, flex-end
flex-wrap
nowrap
(初期値), wrap
, wrap-reverse
flex
flex: 1
align-self
align-items
を指定可能。<nav class="nav">
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">会社情報</a>
<a href="#">お問い合わせ</a>
</nav>
.nav {
display: flex;
justify-content: space-around;
background-color: #333;
padding: 1em;
}
.nav a {
color: white;
text-decoration: none;
padding: 0.5em 1em;
}
.nav a:hover {
background-color: #555;
}
解説:justify-content: space-around;
で、リンクを均等に配置。見た目が整ったナビゲーションが簡単に作れます。
<section class="cards">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</section>
.cards {
display: flex;
gap: 1em;
}
.card {
flex: 1;
padding: 2em;
background-color: #f0f0f0;
text-align: center;
border-radius: 8px;
}
解説:flex: 1
でカードを同じ幅にし、gap
で余白を確保。ブロックが自然に横並びになり、整った3列デザインに。
<div class="container">
<div class="box">中央のボックス</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #e0e0e0;
}
.box {
padding: 2em;
background-color: #fff;
border: 1px solid #ccc;
}
解説:justify-content: center
とalign-items: center
の組み合わせで、ボックスを縦横ともに中央に配置できます。
Flexboxは、メディアクエリと組み合わせることで、レスポンシブデザインにも柔軟に対応できます。
@media (max-width: 768px) {
.cards {
flex-direction: column;
}
}
など、UI設計全般で大活躍します。
Flexboxを使いこなせるようになると、CSSレイアウトの自由度が格段にアップします。特に、初心者にありがちな「どうやって横並びにするの?」「中央に寄せたいけど難しい」といった悩みをスッと解決できるのがFlexboxの魅力です。
今回紹介した基本とレイアウト例をぜひコピーして、自分のWebページで試してみてください。慣れてくれば、複雑なレイアウトも怖くなくなりますよ!