CSS Flexbox入門！display: flexの基本と適用方法を初心者向けに解説

1. display: flexとは何か？

1. display: flexとは何か？

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

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

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つのボックスが横方向に並び、上下中央に揃っています。子要素の間隔は均等になっています。

3. Flexboxでできる基本操作

3. Flexboxでできる基本操作

Flexboxを使うと、次のような操作が簡単にできます。

• justify-content：横方向の揃え方（左寄せ、中央、右寄せ、均等配置）
• align-items：縦方向の揃え方（上揃え、中央揃え、下揃え）
• flex-direction：並べる方向（横方向row、縦方向column）
• flex-wrap：折り返し（画面が狭い場合に次の行に回すかどうか）

これらのプロパティを組み合わせることで、簡単に美しいレイアウトが作れます。

4. Flexboxの応用例

4. Flexboxの応用例

Flexboxを使えば、ナビゲーションメニュー、カード型レイアウト、ボタンの横並びなど様々な場面で活用できます。HTML構造を変えずにCSSだけで整列できるので、後から要素を追加してもレイアウトが崩れにくいのも便利なポイントです。

5. 初心者がまず覚えるべきこと

5. 初心者がまず覚えるべきこと

最初はdisplay: flexを指定すること、子要素を横並びにすること、justify-contentとalign-itemsで中央揃えや間隔調整を試すことをおすすめします。画面サイズに応じた調整も簡単にできるので、レスポンシブデザインにも役立ちます。

少し慣れてきたら、flex-directionやflex-wrap、flex-growなどのプロパティも学び、より自由で柔軟なレイアウトを作れるように練習しましょう。