【flexbox】横並びデザインの基本！コード一行追加で簡単【基礎】

flexboxを使用すると横並びのレイアウトが上図のように簡単に指定できます。

flexboxはフレックスコンテナーと呼ばれる親要素の領域内でフレックスアイテムとよばれる子要素（複数可）を横方向や縦方向などにフレキシブルに配置することができ、flexboxを使うと子要素がブロック要素であっても簡単に横並びの配置が可能になります。

flexbox横並びは親要素にdisplay:flex;

HTMLで親要素（フレックスコンテナー）と子要素（フレックスアイテム）を設定した後、
親要素にCSSでdisplay:flex;と指示するだけで子要素が左から右へ横並びになります。

flexboxで左から右へ横並びにする方法

親要素にflex-direction:row;を指定

子要素を横並びにするためには、本来親要素にdisplay:flex;を指定してフレックスボックスレイアウトにし、その上で親要素内の子要素の並び方や向きを決めるflex-directionを指定する必要があります。
ただ、親要素にdisplay:flex;を指定すると、初期値としてflex-direction:row;が指定されているので子要素が左から右の順方向に並びます。

flexboxで右から左へ横並びにする方法

親要素にflex-direction:row-reverse;を指定

flex-direction:row-reverse;を指定すると、右から左というと語弊があるかもしれませんが、子要素の先頭が右から始まり、子要素の最後が左で終わります。要は右から順に横並びになります。

flexboxで横並びにする場合の参考HTML

例でHTMLを記載すると次のようになります。
親要素（フレックスコンテナ―）→　.flex-parent
子要素（フレックスアイテム）　→　.flex-child

例1）divで全て指定する

<div class="flex-parent">
  <div class="flex-child">フレックスアイテム1</div>
  <div class="flex-child">フレックスアイテム2</div>
  <div class="flex-child">フレックスアイテム3</div>
  <div class="flex-child">フレックスアイテム4</div>
</div>

例2）ulとliで指定する

<ul class="flex-parent">
  <li class="flex-child">フレックスアイテム1</li>
  <li class="flex-child">フレックスアイテム2</li>
  <li class="flex-child">フレックスアイテム3</li>
  <li class="flex-child">フレックスアイテム4</li>
</ul>

flexboxで横並び（左から右）にする場合の基本のCSS

冒頭で記載したことの繰り返しになりますが、
子要素（フレックスアイテム）を左から右へ横並びにする場合は、
親要素（フレックスコンテナー）にCSSでdisplay:flex;を指定するだけです。

.flex-parent {
  display:flex;
  flex-direction:row;(初期値)
}

flexboxで横並び（右から左）にする場合の基本のCSS

子要素（フレックスアイテム）を右から左へ横並びにする場合は、
親要素（フレックスコンテナー）にCSSでdisplay:flex;とflex-direction:row-reverse;だけです。

.flex-parent {
  display:flex;
  flex-direction:row-reverse;
}

まとめ

今回はflexboxレイアウトで要素を横並びにする方法の基本を解説しました。

flexboxで横並びにするには、親要素にdisplay:flex;を指定するだけです。
この場合flex-direction:row;が初期値として指定されていることを忘れないようにしましょう！

ただ、これだけでは実際のコーディング時には思うようなデザインに出来ないことが多く、子要素を均等に配置したり、余白を設けたり、2列・3列にしたりする場合にはさらにCSSでの指定が必要です。

▼余白の設定方法・折り返し方法を知りたい方はこちらの記事から

【flexbox】折り返し指定＆余白の調整をする方法【CSS】デモあり

flexboxで横並びにした要素の折り返し指定をするには、CSSで親要素にflex-wrap:wrap;を指定します。その他、flexboxで子要素を折り返した際の余白の指定の仕方についても紹介しています。

applism.net

▼子要素・孫要素の高さを揃え方を知りたい方はこちらの記事から

【Flexbox】横並びデザインの子要素・孫要素の高さを揃える！

Flexbox横並びレイアウトを、子要素・孫要素まで高さを揃える方法を出来る限りわかりやすく解説していきます。子要素は親要素にdisplay:flex;を指定すると、簡単に高さが揃いますが孫要素は少し工夫が必要です。

applism.net

ホームページ制作も行っていますので、ご依頼やご相談があればお気軽にお問い合わせください✨

お問い合わせ・ご相談

applismではホームぺージ・LPの制作を行っています！完全オリジナルで作成しておりますので、制作会社をお探しの方はお気軽にご相談・お問い合わせください。関西の事業主様はお伺いすることも可能です。

LINEでお問い合わせ

メールでお問い合わせ