【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

Flexbox（フレックスボックス）とは？

CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。

Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下の子要素がフレックスアイテムとして扱われ、多彩なレイアウト制御が可能になります。

フレックスコンテナの主なプロパティ

フレックスコンテナ（親要素）には、以下のプロパティを指定できます。

flex-direction … アイテムが並ぶ方向（主軸の向き）を指定します（例：横並び row ／縦並び column）。
flex-wrap … アイテムがコンテナからあふれた場合の折り返し方法を指定します。
flex-flow … flex-directionとflex-wrapをまとめて指定できるショートハンドプロパティです。
justify-content … 主軸方向におけるアイテムの配置位置や間隔を指定します。
align-items … 交差軸方向における各アイテムの揃え方を指定します。
align-content … 複数行に折り返した場合の行全体の配置を指定します。

Flexboxを使った高度なCSSレイアウトのサンプルコード

以下は、複数のフレックスコンテナを組み合わせて構成した、高度なCSSレイアウトのサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: lightblue;
}
.container1 {
    align-self: flex-start;
    display: flex;
    background-color: rgb(71, 30, 255);
    width: 200px;
    margin: 20px;
}
.container1 > div {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 10px;
    font-size: 30px;
}
.container2 {
    display: flex;
    background-color: rgb(14, 126, 79);
    width: 200px;
    justify-content: center;
    align-self: flex-start;
    margin: 20px;
}
.container2 > div {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 10px;
    font-size: 30px;
}
.container3 {
    display: flex;
    flex-direction: column;
    background-color: rgb(168, 60, 10);
    width: 200px;
    align-items: center;
    margin: 20px;
}
.container3 > div {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 10px;
    width: 20px;
    font-size: 30px;
}
</style>
</head>
<body>
<h1>Flex layout example</h1>
<div class="container">
<div class="container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>

コードのポイント解説

.container： display: flex;でフレックスコンテナ化し、flex-wrap: wrap;で折り返しを許可。justify-content: space-evenly;により、内側のコンテナを均等な間隔で配置しています。
.container1：デフォルトの横並び（row）レイアウト。align-self: flex-start;で交差軸方向（縦方向）の上端に揃えています。
.container2： justify-content: center;を指定し、アイテムを主軸方向の中央に寄せて表示しています。
.container3： flex-direction: column;でアイテムを縦方向に積み重ね、align-items: center;で水平方向の中央揃えを実現しています。

出力結果

上記のコードを実行すると、次のような出力が得られます。

【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

CSSでレスポンシブタイムラインを作成する方法【サンプルコード付き】

CSSだけでカレンダーを作成する方法をわかりやすく解説【サンプルコード付き】

CSSだけでメニューアイコン（ハンバーガーメニュー）を作成する方法
CSSだけを使えば、画像ファイルに頼らずに、スマートフォンサイトなどでよく見かける「メニューアイコン」（三本線のハンバーガーアイコン）を簡単に作成できます。仕組みはとてもシンプルで、横長の長方形（バー）を3つ縦に並べるだけです。実装例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div { width:
CSSだけで実現するスムーススクロールの書き方
CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ