先生と生徒の会話形式で理解しよう

生徒

「フレックスボックスで、並び方を縦にしたり横にしたりできると聞いたんですが、どうやって変えるんですか？」

先生

「CSSでは、flex-directionを使うと、要素のならび順を簡単に変えることができますよ。」

生徒

「縦並びと横並びって、実際にはどんなふうに変わるんですか？」

先生

「では、実際のコードを見ながら、フレックスボックスで縦方向や横方向に並べる方法を順番に学んでいきましょう。」

1. flex-directionとは何かを理解しよう

フレックスボックス（Flexbox）は、CSSで要素を柔軟に配置するためのレイアウト方法です。ウェブページを作るとき、「横に並べたい」「縦に並べたい」という場面はとても多く、そうしたレイアウトを簡単に行えるため人気があります。 flex-direction（フレックスディレクション）は、その中でも重要なプロパティで、要素をどちらの方向に並べるかを決める役割を持ちます。

flex-directionで使える主な値は次の二つです。横方向に並べる row、縦方向に並べる column。「row」とは英語で「横列」、「column」とは「縦列」という意味なので、コンピューターに「横にしよう」「縦にしよう」と伝えているイメージです。初心者の方は最初、この横と縦の違いを理解するところから始めると、フレックスボックスがとても扱いやすくなります。

2. 横方向に並べる：rowの使い方

まずは、flex-directionの基本となる横並びの設定を確認しましょう。フレックスボックスを使うためには、並べたい要素を包む「親」要素に display:flex を指定します。これがフレックスボックスの出発点です。この状態で flex-direction: row を指定すると、子要素は自然と横方向に並びます。横に並ぶことで、メニューやボタンを横一列に並べたいときに便利です。実際のコード例を見ると、どの部分が大切なのかがより分かりやすくなります。


<style>
    .box-row {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    .item {
        padding: 10px;
        background: #a3d5ff;
        border-radius: 8px;
    }
</style>

<div class="box-row">
    <div class="item">ボックス1</div>
    <div class="item">ボックス2</div>
    <div class="item">ボックス3</div>
</div>

ブラウザ表示

このように、rowを指定することで、子要素が整然と横並びになります。初心者でもすぐに視覚的に理解できるため、まずはrowから触ってみると良いでしょう。

3. 縦方向に並べる：columnの使い方

続いて、縦に並べる方法です。flex-direction: column を指定するだけで、子要素は上から下へと縦方向に並びます。スマートフォンなど縦長の画面では、縦に並んだレイアウトが自然な場合が多く、現代のウェブ制作では欠かせない方法です。縦並びに変えることで、読みやすさが向上し、見せたい順番もはっきり伝えられます。


<style>
    .box-column {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .item2 {
        padding: 10px;
        background: #ffe0a8;
        border-radius: 8px;
    }
</style>

<div class="box-column">
    <div class="item2">ボックスA</div>
    <div class="item2">ボックスB</div>
    <div class="item2">ボックスC</div>
</div>

ブラウザ表示

columnを使うと、スマートフォンのアプリのように縦方向へ自然に積み重なるレイアウトになります。「並びを縦に変更する」ことは、画面幅に合わせた配置を作りやすいので、より読みやすいコンテンツに仕上げる際にとても役立ちます。

4. flex-directionのしくみを身近な例でイメージしよう

flex-directionを理解する最も良い方法は、日常生活に置き換えて考えることです。例えば、本棚に本を並べるとき、横向きに並べるのか、縦に積み重ねるのかで見た目が変わります。横向きに並べるならrow、縦に積み重ねるならcolumn。これとまったく同じ考え方です。コンピューターに「どの向きに並べるか」を伝えているだけなので、難しく考える必要はありません。

また、flex-directionを変えることで、画面の情報の伝え方も変わります。重要な情報を縦方向に順番に見せたいときはcolumnが適していて、ボタンやリンクを並べて操作しやすくしたいときにはrowが向いています。「誰が見ても使いやすくする」という観点で方向を選ぶと、はじめてウェブ制作する人でも自然なレイアウトに近づくでしょう。

5. flex-directionとフレックスボックスが使われる場面

フレックスボックスは、多くのサイトで当たり前のように使われています。例えば、ナビゲーションメニュー、記事の一覧、プロフィール欄、ボタンのグループなど、「複数の要素が規則的に並んでいる場所」ではほぼ必ずフレックスボックスが利用されます。 flex-directionで並びを調整することで、画面サイズが変わってもレイアウトが整って見えます。初心者でも設定が簡単なので、細かい計算や複雑な設定をしなくても、きれいな配置が実現できるのが魅力です。

また、フレックスボックスは古い方法よりも自由度が高いため、最近のCSS学習では優先的に覚えたい項目として扱われています。その中でもflex-directionは必ずおさえておくべき基礎であり、画面の印象や情報の伝わり方を大きく左右する大切なプロパティです。方向を変えるだけで、同じ内容でも読みやすさが全く変わる点を実際に体験すると、レイアウトの理解がぐっと深まります。

6. 初心者がつまずきやすいポイントと対策

フレックスボックスを学び始めたばかりの人がつまずきやすい点に、「flex-directionを指定しているのに並びが変わらない」というものがあります。実は、flex-directionは親要素に対して指定しないと効果がありません。子要素にだけ設定しても何も変わらないので、必ずdisplay:flexとセットで親に指定するようにしましょう。このポイントを理解しておくと、思った通りにレイアウトが動かない原因をすぐに見つけられます。

もう一つは、方向のイメージが混乱することです。パソコン画面を横に広げて見ることが多いと、rowが自然に感じるため、 columnの動きが分かりづらくなることがあります。そんなときは、スマートフォンの画面を思い浮かべてください。縦に長い画面では、情報を上から順番に見せるcolumnが自然です。こうした視点を持つと、flex-directionをどう使い分けるかを理解しやすくなります。