css で段組みする

2023年4月28日

　css で段組みする際、フレックスボックスレイアウトを使っています。全体を囲む親要素の display プロパティに flex を指定します。

フレックスボックスレイアウト

　単純に親要素の display に flex を設定しただけだと次のようになります。わかりやすくするために子要素それぞれに色をつけています。

css

  .main {
    display: flex;
  }
  .test1 {
    background-color: #40afaf;
  }
  .test2 {
    background-color: #af40af;
  }
  .test3 {
    background-color: #afaf40;
  }

html

  <div class="main">
    <div class="test1">一段目</div>
    <div class="test2">二段目</div>
    <div class="test3">三段目</div>
  <div>

　子要素に flex-glow を使うと、余白に合わせて伸長させることができます。一段目と二段目に指定してみます。

css

  .main {
    display: flex;
  }
  .test1 {
    background-color: #40afaf;
  }
  .test2 {
    background-color: #af40af;
  }
  .test3 {
    background-color: #afaf40;
  }
  .grow {
    flex-grow: 1;
  }

html

  <div class="main">
    <div class="test1 glow">一段目</div>
    <div class="test2 glow">二段目</div>
    <div class="test3">三段目</div>
  <div>

表組みにする

　css で表組みをすることで、段組みをさせることができます。この場合、親要素の display プロパティは table、子要素の display プロパティには table-cell を指定します。

css

  .main {
    display: table;
    width: 100%;
  }
  .test1 {
    background-color: #40afaf;
  }
  .test2 {
    background-color: #af40af;
  }
  .test3 {
    background-color: #afaf40;
  }
  .sub {
    display: table-cell;
  }

html

  <div class="main">
    <div class="test1 sub">一段目</div>
    <div class="test2 sub">二段目</div>
    <div class="test3 sub">三段目</div>
  <div>

　細かい指定をする場合はフレックスボックスレイアウトのほうが良いと思いますが、単純な段組であればどちらを使っても良いと思います。