Flexbox を使って要素を並べる

2018年9月15日

📋 目次（クリックで展開）

Flexbox を利用して、要素を横並び、縦並びにする方法です。

横並び

リストの親要素(div class=“list”) の display に flex を指定します。そして、リストの子要素に flex を指定します。ここでは flex: 1 1 としています。

.list {
    display: flex;
}
.list-item {
    flex: 1 1;
    border: solid cadetblue 1px;
}

<div class="list">
    <div class="list-item">item 1</div>
    <div class="list-item">item 2</div>
    <div class="list-item">item 3</div>
</div>

縦並びは、リストの親要素(div class=“list”) の display-direction に column を指定します。

.list {
    display: flex;
    flex-direction: column;
}
.list-item {
    flex: 1 1;
    border: solid cadetblue 1px;
}

<div class="list">
    <div class="list-item">item 1</div>
    <div class="list-item">item 2</div>
    <div class="list-item">item 3</div>
</div>