CSSのflexbox用コード自動生成ツール
もくじ
flexboxとは
- 要素を左から順に並べたい。
- 均等な幅で並べたい。
- 上から順に並べたい。
などなど、HTML要素を規則的に並べることが簡単に実現できるCSSの機能。
flexboxを使う前に
次の2つの前提を頭に入れておく必要がある。
１．並べたい要素（子要素）と、それらを囲む親要素1つを必ず用意する
親要素
子要素
子要素
子要素
HTMLコードで書くとこんな具合だ。
<!-- 親要素 -->
<div class="flex_container">
<!-- 子要素（div, h1, imgなど） -->
<div>
</div>
<!-- 子要素（div, h1, imgなど） -->
<div>
</div>
<!-- 子要素（div, h1, imgなど） -->
<div>
</div>
</div>２．親要素の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></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>