display:flexで要素を横並びにさせよう【css】

Contents

display:flex;とは

display:flexとはフレックスボックスと呼ばれており、要素に定義するだけで、その直下の要素が並列になるスタイルです。横並びだけではなくフレキシブルで簡単にレイアウトが組めるボックスになっています。

以前横並びにはfloatが使われていましたが、現在ではこのフレックスボックスが一番主流でスタンダードなものになっています。

記述方法

//1
<ul class="flex">
<li>ボックス１</li>
<li>ボックス２</li>
<li>ボックス３</li>
</ul>

//2
<div class="flex">
 <div>
   <img src="http://placehold.jp/400x400.png">
 </div>
 <div>
   <h3>タイトル</h3>
   <p>テキストが入ります。</p>
 </div>
</div>

フレックスボックスで要素を横並びにさせるにあたり、widthやimgなどを指定したい場合は横並びさせる要素をdivなどで囲むことをオススメします。

上記のHTMLをflexで横並びにしていきたいと思います。

出力結果

//1

.flex{
        display: flex;
        gap:30px;
}

ボックス１
ボックス２
ボックス３

一番ベーシックなフレックスボックスの形で、display: flex;を指定するだけで中の要素を横並びにすることができます。

付属しているgapプロパティについては過去の記事にある「gapを使いこなそう」までお願いします。

[blogcard url=”https://chillblog.org/2022/05/16/%e3%80%90css%e3%80%91gap%e3%82%92%e4%bd%bf%e3%81%84%e3%81%93%e3%81%aa%e3%81%9d%e3%81%86/”]

//2

.flex{
        display: flex;
        flex-wrap: wrap;
        gap:30px;
        align-items: center;
}

タイトル

テキストが入ります。

フレックスボックスを使用し画像とテキストを横並びにすることができました。

上記でも説明しましたが、この時のポイントがdivです。flexさせたい要素とその要素達を囲うdivを指定することで上手く横並びにさせることができます。

flexと組み合わせて使うプロパティ

最後に私がよくdisplay:flex;と組み合わせて使用するプロパティをいくつかご紹介します。

flex-wrap

フレックスアイテムを行の最後まで行った時に、折り返すかそうでないかを指定します。

flex-wrap: nowrap; 
flex-wrap: wrap;
flex-wrap: wrap-reverse;

flex-direction

横並びの方向性や、配置を指定します。

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

align-items

フレックスボックスでは交差軸方向のアイテムの配置を制御します

align-items: normal;
align-items: stretch;
align-items: center; 
align-items: start; 
align-items: end;
align-items: flex-start; 
align-items: flex-end;

justify-content

フレックスボックス中のアイテムの間や周囲に間隔を配置する方法を定義します。

justify-content: center;  
justify-content: start;     
justify-content: end;        
justify-content: flex-start; 
justify-content: flex-end;
justify-content: left;      
justify-content: right;   
justify-content: space-between; 
justify-content: space-around;
justify-content: space-evenly;