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

もくじ


flexboxとは

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

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


flexboxを使う前に

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

1.並べたい要素(子要素)と、それらを囲む親要素1つを必ず用意する

親要素
子要素
子要素
子要素

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

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

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

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

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

}

CSSコード自動生成ツール

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

flex-direction: 並べる向きは?

flex-wrap: 折り返す?

justify-content: 左右方向にはどう揃える?

align-items: 上下方向にはどう揃える?

align-content: 複数行になったとき、各行をどう配置する?

並べ方のイメージ

1
2
3
4
5
6
7
8
9
10

サンプルCSSコード

サンプルHTMLコード

<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>