flexboxの使い方

Flexboxの使い方

グリッドレイアウトを作りやすい。 floatを使うより、flexを使う方が簡単で分かりやすい。

列数を指定する方法

widthを指定する。

<div class="grid_layout">
  <div class="grid">
  </div>
  <div class="grid">
  </div>
  <div class="grid">
  </div>
  <div class="grid">
  </div>
</div>

.grid_layout {
  display: flex;
  flex-wrap : wrap;  /*はみ出たら改行する*/
}
.grid {
  /*親要素の横幅を100%として3等分する　→　4つ目から2行目へ改行される*/
  width: calc( 100% / 3 );  
}

列の横幅の割合を決める

flex:1 とか flex:2 とかを指定するパターン

<div class="body">
  <main class="main">
  </main>
  <aside class="aside">
  </aside>
</div>

.body {
  display: flex;
}
.main {
  /* 2/3 の横幅にする */
  flex: 2;  
}
.aside {
  /* 1/3 の横幅にする */
  flex: 1;  
}

片方にflex、もう片方に width を指定するパターン

<div class="body">
  <main class="main">
  </main>
  <aside class="aside">
  </aside>
</div>

.body {
  display: flex;
}
.main {
  /* 100%から300pxを引いた横幅にする */
  flex: 1;  
}
.aside {
  width: 300px;  
}