初心者でも簡単に横並び！flexboxでHTMLブロック要素の配置

はじめに
解決方法
おわりに
参考記事

はじめに

皆様、はじめまして。株式会社ゼネットの方です。

新人研修の中で、HTMLレイアウトの横並びに苦戦しましたが、
その解決方法について簡単にご紹介いたします。

この記事が皆様のお役に立てれば幸いです。

環境：Eclipse 2018 Windows 64bit

解決方法

（結論）私も以前、floatやinline-blockなどさまざまな方法を試しましたが、最終的にはflexboxを使うことで問題を解決しました。

flexboxを使うことで、親要素と子要素の関係を理解しやすく、コードもシンプルになります。また、flexはfloatに比べて自由に、簡単に横並びのCSSプロパティであり、親要素と子要素が干渉しないので、初心者にも優しいです。

【使い方】

横並びにしたいブロック要素の親要素には、display: flex;と指定します。

【使用例】

htmlコード例

<div class="container"> 　<div class="item1">Item 1</div> 　<div class="item2">Item 2</div> </div>

中央寄せ

justify-content: center;を使用します。

CSSコード例


.container {
 display: flex;
 justify-content: center;
}
.item1 {
 flex: 1;
 background-color: yellow;
 width: 200px;
 height: 100px;
}
.item2 {
 flex: 1;
 background-color: red;
 width: 200px;
 height: 100px;
}

（図）中央寄せ

左寄せ

justify-content: start;を使用します。

CSSコード例


.container {
 display: flex;
 justify-content: start;
}

（図）左寄せ

右寄せ

justify-content: end;を使用します。

CSSコード例


.container {
 display: flex;
 justify-content: end;
}

（図）右寄せ

（解説）このようにすることで、親要素.container内の子要素.itemが均等に横並びに配置されます。floatやinline-blockよりも直感的で、親子要素の関係が明確になります。

ワンポイント

さらに、align-itemsやjustify-contentなど、flexbox以外にも便利なCSSプロパティがありますので、幅広く知識を深めていきましょう。

活用編

他のプロパティをを使ってみましょう！

orderプロパティは、要素の表示順序を制御するためのプロパティです。このプロパティを使うことで、HTML上の要素の順序と実際の表示順序を独立して制御することができます。

justify-content:プロパティは、flexコンテナ内のflexアイテムの水平方向の配置を制御します。space-around値を使用すると、flexアイテムの間に均等なスペースが追加され、各アイテムの周囲に空白が配置されます。

flex-wrap: wrap;は、flexboxコンテナ内のflexアイテムの折り返しを制御するためのCSSプロパティです。flexアイテムがコンテナの幅を超える場合に、新しい行に折り返されます。

htmlコード例


<div class="grid">
　　<div class="grid-item">Item 1</div>
    <div class="grid-item2">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
    <div class="grid-item">Item 7</div>
    <div class="grid-item">Item 8</div>
</div>

CSSコード例


.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center
}
.grid-item {
 　background-color: yellow;
 　width: 200px;
    margin: 10px;
}
.grid-item2 {
 　background-color: red;
 　width: 200px;
 　margin: 10px;
 　order: -1;
}