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

生徒

「先生、Webページのレイアウトを簡単に整えたいんですけど、Flexboxって何ですか？」

先生

「FlexboxはCSSの仕組みで、要素を自動的に横並びや縦並びに整列させることができます。特にdisplay: flexを親要素に指定すると、子要素の配置が簡単になります。」

生徒

「横に並べたり、中央に揃えたりするのが簡単になるんですね。でもどうやって使うんですか？」

先生

「それでは、display: flexの基本と使い方を順番に見ていきましょう。」

1. display: flexとは何か？

display: flexはCSSでフレックスコンテナ（親要素）を作り、子要素（フレックスアイテム）を柔軟に配置するためのプロパティです。従来のfloatやpositionを使った手動の配置よりも簡単で、要素を自動で横並びや縦並びに整列できます。これにより、Webページのレイアウト作りがぐっと楽になります。

2. display: flexの基本的な書き方

親要素にdisplay: flexを指定するだけで、子要素は自動的に横並びになります。縦方向に並べたい場合は、flex-directionプロパティを使います。


<style>
.flex-container {
    display: flex;
    flex-direction: row; /* 横方向に並べる */
    justify-content: space-between; /* 子要素の間隔を均等に */
    align-items: center; /* 子要素を縦方向に中央揃え */
    height: 100px;
    background-color: #f0f0f0;
}
.flex-item {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

<div class="flex-container">
    <div class="flex-item">A</div>
    <div class="flex-item">B</div>
    <div class="flex-item">C</div>
</div>

ブラウザ表示

この例では、3つのボックスが横方向に並び、上下中央に揃っています。子要素の間隔は均等になっています。