![](https://beeyanblog.com/wp-content/uploads/2019/10/blogcss.jpg)
どうも、べ〜やんです。
今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。
目次
flexboxとは?
要素を横並びに配置する方法のひとつに、flexboxがあります。
flexboxはCSS3から導入されたものです。なのでそれ以前からある方法のfloatとは別のものですので混同しないように注意してください。
HTMLでは基本的に要素は縦並びに配置されますが、flexboxを使って横並びにできます。
![](https://beeyanblog.com/wp-content/uploads/2019/10/2996ec54ca433966253dc60909c12af2-1024x854.png)
↓
![](https://beeyanblog.com/wp-content/uploads/2019/10/55fc9b4b9339846624b656664c78dec0-1024x213.png)
flexboxの書き方
flexboxを使うには、まずHTMLで親要素と子要素を作ります。
親要素(container)のなかに子要素(item)を作り、親要素のCSSにdisplay:flex;を与えます。
横並びにしたいのは子要素の部分ですが、flexを与えるのは親要素ですので間違えないように注意してください。
<div class="flex-container"> <!-- 親要素 -->
<div class="flex-item">1</div> <!-- 子要素 -->
</div>
.flex-container {
display: flex;
}
.flex-item {
}
これで左から右の順で横並びになるので、あとはCSSで細かい調整をするだけです。
![](https://beeyanblog.com/wp-content/uploads/2019/10/ed08a4ba3d4076ca13e1b79846291368-1024x187.png)
ここでは左から右の順で横並びになっていますが、その他のレイアウトもできるので紹介します。
flexboxの種類 (親要素)
並び順 flex-direction
flex-directionプロパティを使って並び順を変更できます。
左から右 row(デフォルト)
水平方向に左から右の順に並ぶ。
.flex-container {
display: flex;
flex-direction: row;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/ed08a4ba3d4076ca13e1b79846291368-1024x187.png)
右から左 row-reverse
水平方向に右から左に並ぶ。
.flex-container {
display: flex;
flex-direction: row-reverse;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/40466d07f6e44461be7c3a837340b466-1024x178.png)
上から下 column
垂直方向に上から下に並ぶ。
.flex-container {
display: flex;
flex-direction: column;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/25133e01f23411ba5ea91bebc092f8a1-854x1024.png)
下から上 column
垂直方向に下から上に並ぶ。
.flex-container {
display: flex;
flex-direction: column-reverse;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/46132c0a0e42fde8b2eaf62affd4a8cb-954x1024.png)
折り返し flex-wrap
flex-wrapプロパティを使って、横幅いっぱいになったとき折り返しをどうするかを指定できます。
折り返しなし nowrap
折り返しなし。
.flex-container {
display: flex;
flex-wrap: nowrap;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/4a01a1c7fb6236f529e305586ea39b9f-1024x152.png)
折り返して上から下 wrap
折り返して上から下に行を作る。
.flex-container {
display: flex;
flex-wrap: wrap;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/7996437c9266923b6940356bfc77ec6d-1024x358.png)
折り返して下から上 wrap-reverse
折り返して下から上に行を作る。
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/5d157ce9fe372461c2ed3899ffcfd72f-1024x378.png)
並びと折り返しを一括指定 flex-flow
flex-flowを使って並び順と折り返しの指定を一箇所でできます。
flex-flow: 並び順 折り返し; で指定します。
.flex-container {
display: flex;
flex-flow: row-reverse wrap;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/048ed1bf49f0cac98db6efd1a6c1b50e-1024x385.png)
水平方向の位置指定 justify-content
justify-contentaプロパティを使って、アイテムの右揃えや中央揃えなど水平位置指定ができます。
左揃え flex-start
アイテムを左揃えで配置。
.flex-container {
display: flex;
justify-content: flex-start;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/7992ee80523e56802cd99c2355dd9df6-1024x107.png)
右揃え flex-end
アイテムを右揃えで配置。
.flex-container {
display: flex;
justify-content: flex-end;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/9af47852bd82e2be0988f658da5e32e8-1024x117.png)
中央揃え center
アイテムを中央揃えで配置。
.flex-container {
display: flex;
justify-content: center;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/05c7f24269a14e439b3127ce07c5e94a-1024x113.png)
均等配置 space-between
アイテムを横幅いっぱいに均等に配置。
.flex-container {
display: flex;
justify-content: space-between;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/dbb9c58d504585420c9b18a3e3946e0c-1024x114.png)
均等配置 space-around
アイテムを均等に配置。
.flex-container {
display: flex;
justify-content: space-around;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/392cf2843819f609345f4813fa8f71fb-1024x124.png)
垂直方向の位置指定 align-items
align-itemsプロパティを使って垂直方向の位置指定ができます。
子要素にheight: 100px;など絶対値を指定しているとうまく動作しないものもあるので、min-height: 100px;(最小で100px)などと指定してみてください。
上揃え flex-start
上に揃えて配置。
.flex-container {
display: flex;
align-items: flex-start;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/d81fa4cafb8fa61658a1eddb936af126-1024x235.png)
下揃え flex-end
下に揃えて配置。
.flex-container {
display: flex;
align-items: flex-end;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/9b46d55f97fb511d6e391fa7f1a24c21-1024x239.png)
中央揃え center
中央に揃えて配置。
.flex-container {
display: flex;
align-items: center;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/7a2923b4ddea7c0f333bcd6993cbf3e1-1024x237.png)
ベースライン揃え baseline
ベースラインに揃えて配置。
.flex-container {
display: flex;
align-items: baseline;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/4cb2d53fe0bec4647ff90d7e21da0f6f-1024x230.png)
縦の余白を埋めるように stretch
縦の余白を埋めるように配置。
.flex-container {
display: flex;
align-items: stretch;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/fe36ab2ded941dceaba76637a80ff5e7-1024x182.png)
二行以上の垂直配置 align-content
align-contentプロパティで複数行のときの垂直配置を指定ができます。
上揃え flex-start
上に揃えて配置。
.flex-container {
display: flex;
align-content: flex-start;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/3de27968edb6f3229f77f893cf53b297-1024x243.png)
下揃え flex-end
下に揃えて配置。
.flex-container {
display: flex;
align-content: flex-end;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/1799020b1e1e7484b827dfd68b17f9f3-1024x247.png)
中央揃え center
中央に揃えて配置。
.flex-container {
display: flex;
align-content: center;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/b0e8fa5dfc4d17d33ad60049dea4c59a-1024x251.png)
均等配置 space-between
行を縦幅いっぱいに均等に配置。
.flex-container {
display: flex;
align-content: space-between;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/82dac1eca1d3b0618bbb35653f50b568-1024x250.png)
均等配置 space-around
行を均等に配置。
.flex-container {
display: flex;
align-content: space-around;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/3224e2644e76e31a9c15e8be2dad4140-1024x251.png)
縦の余白を埋めるように stretch
縦の余白を埋めるように配置。
.flex-container {
display: flex;
align-content: stretch;
}
![](https://beeyanblog.com/wp-content/uploads/2019/10/3fc62743dd9a0167de22252f6760391f-1024x252.png)
おわりに
今回は、flexboxの基本的な使い方について紹介しました。
この他にも、子要素にさまざまな設定をしてレイアウトができます。
別の機会に子要素側の紹介もします。
![](http://image.moshimo.com/af-img/0866/000000026194.jpg)