コラム

フレックスボックスdisplay: flex;を使ったレイアウト

2022年05月26日
フレックスボックスdisplay: flex;を使ったレイアウト

Webサイトの制作に横並びにする場面は何度も出てきますよね。
横並びにする方法はいくつかありますが、今回はフレックスボックスでの横並びを説明します。
非常に簡単なのでぜひ使ってみてください。

実際のCSSをご覧ください

/* 親要素 */
#container {
  display: flex;
}

/* 子要素 */
#side{
  width:20%;
  background:#000;
}
#main{
  width:80%;
  background:#fff;
}
<div id="container">
  <div ="side">
   ここにサイドバーの内容
  </div>
  <div ="main">
   ここにメインコンテンツの内容
  </div>
</div>

このように親要素にdisplay:flex;を入れることで、その中の子要素が横並びなります。
子要素の横幅のサイズも%やpxで指定することも可能です。

弊社のテンプレートプランで提供しているデザインにも使用していますのでサンプルとしてご覧ください。

サンプル