CSSのflexbox用コード自動生成ツール

もくじ

• flexboxとは
• flexboxを使う前に
• CSSコード自動生成ツール

---

flexboxとは

• 要素を左から順に並べたい。
• 均等な幅で並べたい。
• 上から順に並べたい。

などなど、HTML要素を規則的に並べることが簡単に実現できるCSSの機能。

---

flexboxを使う前に

次の2つの前提を頭に入れておく必要がある。

１．並べたい要素（子要素）と、それらを囲む親要素1つを必ず用意する

HTMLコードで書くとこんな具合だ。

<!-- 親要素 -->
<div class="flex_container">
  <!-- 子要素 -->
  <div class="flex_content">
  </div>
  <!-- 子要素 -->
  <div class="flex_content">
  </div>
  <!-- 子要素 -->
  <div class="flex_content">
  </div>
</div>

２．親要素のCSSで並び方を指定するのが基本

上のコード例でいうと、CSSプロパティは次のように指定する。

/* 親要素 */
.flex_container {
  /* これは絶対に書く。*/
  display: flex;
  
  /* 並び方の詳細を指定するプロパティをここに書く。*/

}

---

CSSコード自動生成ツール

次のツールを使うと、flexboxを使う上で親要素に必要なCSSコードが生成できる。ツールのラジオボタンを色々いじってみて、実装の参考にして欲しい。

flex-direction: 並べる向きは？

<div class="flex_container">
	<div class="flex_content"></div>
	<div class="flex_content"></div>
	<div class="flex_content"></div>
	<div class="flex_content"></div>
	<div class="flex_content"></div>
	<div class="flex_content"></div>
	<div class="flex_content"></div>
	<div class="flex_content"></div>
	<div class="flex_content"></div>
	<div class="flex_content"></div>
</div>