【HTML&CSS】要素を様々な形で並べる

子要素などを並列に並べることができる「flex」の説明です

また、他のプロパティと合わせて利用することで、子要素を様々な

並べ方、間隔に配置することが可能です。

利用方法を以下に記述しました。

HTMLファイルのbodyタグ内の記述

「flexクラス」と「divクラス」を用意して、以下のように記述しました。

「flexクラス」が親、「divクラス」が子としています。

<body>
    <div class="flex">
        <div class="div">
        </div>
        <div class="div">
        </div>
        <div class="div">
        </div>
    </div>
</body>

「flex」を使用していない場合

.flex{

}
.div{
    background-color: aqua;
    height: 50px;
    width: 50px;
    border: 5px solid red;
    margin: 5px;
}

「flex」を使用した場合

.flex{
    display: flex;
}

.div{
    background-color: aqua;
    height: 50px;
    width: 50px;
    border: 5px solid red;
    margin: 5px;
}

「flex」+その他プロパティを使ってみる

親要素の横幅の中央に配置する

「justify-content:center;」を使います。

.flex{
    display: flex;
    justify-content:center;
}

わかりやすいように親の背景を変えてあります。

親要素の縦幅の中央に配置する

「align-items:center;」を使います。

.flex{
    display: flex;
    align-items:center;
}

まとめ

今回は「flex」を利用した子要素の並べ方の変え方を記載しました。

今回取り上げたプロパティ以外にも様々な並べ方ができるプロパティがあるので

利用した際には追加していきます。

シェアする

フォローする