2014年9月21日日曜日

CSS3 Flexboxで伸縮カラムを作る

CSS3Flexboxを使えば画面の横幅に合わせてフレキシブルに伸縮するカラムを簡単に作ることができます。

Flexboxはdisplay: flex;から始まります。

下のサンプルでは、よくありがちな「横置きメニュー」と「伸縮可能なカラムを持つテーブル」を実現しています。

<html>
  <style>
  /* general horizontal menu */
  nav > ul {
    display: flex;
    padding: 0px;
    background-color: gray;
  }
  nav > ul > li {
    min-width: min-content;
    /* Prevent items from getting too small for their content. */
    padding: 4px;
    list-style-type: none;
    background-color: cyan;
  }
  nav > ul > #login {
    margin-left: auto;
  }

  /* row */
  div.row {
    display: flex;
  }
  div.row > .fixCol {
    width: 100px;
    background-color: yellow;
  }
  div.row > .flexCol1 {
    flex: 1.0;
    background-color: green;
  }
  div.row > .flexCol2 {
    flex: 2.0;
    background-color: lightgreen;
  }
  </style>

  <body>
    <nav>
      <ul>
        <li><a href="/about">About</a>
        <li><a href="/projects">Projects</a>
        <li><a href="/interact">Interact</a>
        <li id='login'><a href="/login">Login</a>
      </ul>
    </nav>

    <div class="row">
      <div class="fixCol">fixCol</div>
      <div class="flexCol1">flexCol1</div>
      <div class="flexCol2">flexCol2</div>
    </div>

    <div class="row">
      <div class="fixCol">fixCol</div>
      <div class="flexCol1">flexCol1</div>
    </div>

    <div class="row">
      <div class="fixCol">fixCol</div>
      <div class="flexCol1">flexCol1</div>
      <div class="fixCol">fixCol</div>
    </div>

  </body>
</html>

注目
上のflex: 1.0;はカラム幅の比率を表しています。例えば一つの行に flex:1.0flex:2.0 なカラムが一つづつ存在するとすれば、カラム幅は1:2の比率でレイアウトされます。

サンプルを実行するとこのように表示されます。



画面の幅を変えてみましょう。fixColは固定されたままですが、flexCol1とflexCol2は画面幅にあわせて伸縮します。

flexboxを使えばスタイルシートがかなりスッキリしますね。

0 件のコメント:

コメントを投稿