justify-content のプロパティオプションは前に紹介したのよりもっとたくさんあるらしい。 また、どう違うのかがいまいち分かりにくいので、全部実際に試してみる。
justify-contentオプション
| center | ■ ■ ■ | 中央寄せ |
| start | ■ ■ ■ | 昇順(左寄せ) |
| end | ■ ■ ■ | 逆順(右寄せ) |
| flex-start | ■ ■ ■ | 昇順(左寄せ) |
| flex-end | ■ ■ ■ | 降順(右寄せ) |
| left | ■ ■ ■ | 左寄せ |
| right | ■ ■ ■ | 右寄せ |
| space-between | ■ ■ ■ | 均等(余白無) |
| space-around | ■ ■ ■ | 均等(余白有) |
| space-evenly | ■ ■ ■ | 余白均等 |
| stretch | ■ ■ ■ | 均等引伸？ |
| safe center | ■ ■ ■ | 溢れた時はSTARTに |
| unsafe center | ■ ■ ■ | 溢れてもcenter |
| inherit | ■ ■ ■ | 継承 |
| initial | ■ ■ ■ | 初期値 |
| unset | ■ ■ ■ | 初期値(継承除) |
| normal | ■ ■ ■ | 初期値 |
END と RIGHT は Firefox 以外では右寄せにならなかった。（ので Flex-end を使ったほうがよさそう。) ※昔から、Firefoxはルールに忠実に表示してましたね。他のブラウザは独自ルールが結構多かった。 strech は、均等に伸びて隙間がなくなるような説明に思えたのだけど、うまくいかない。 safe と unsafe もいまひとつ動作がよく分からない。 まぁ、現実的に使うのは、
center (中央寄せ) flex-start (左寄せ) flex-end (右寄せ) space-between (均等・左右余白なし) space-around (均等・左右余白あり) space-evenly (均等・左右余白も均等)
なので良いか(^^;)
※strech は、縦方向の一様性のプロパティだとの情報を発見 justify-content ではなく、align-items で使用するみたいですね。
TEST
TEST
TEST
親領域が縦に長くなっても、子アイテムの縦の長さが伸長されて隙間がないようになる。
TEST
TEST
TEST
なるほど！ ちなみに、初期値が「 strech 」になっているので、何も指定しなければ、いつもぴったり埋めてくれる動作になってるわけですね。。。
せっかくなので、縦方向のデモも試してみる
align-items:Flex-start;
TEST
TEST
TEST
align-items:center;
TEST
TEST
TEST
align-items:Flex-end;
TEST
TEST
TEST
※ちなみに、align-items の代わりに「 align-self 」を使うと、アイテムごとに個別に位置を指定できる。
align-content を使うと、複数行に渡るアイテムの位置を左右中央と均等割付の指定ができる ただし、flex-wrap:wrap;である必要がある。（nowrapの場合はすべてstrechになってしまった。） 逆に複数行に渡るものに「 align-items 」を使うと、すべて「 align-content:space-around; 」と同じ動作になってしまった。 つまり、複数行あるかどうかではなく、 flex-wrap が nowrap の場合は align-items 、 wrap の場合は align-content を使うということですね。
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
align-content:space-evenly;
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
align-content:strech;
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
つまり、align-contentとjustify-contentを合わせると、こうなる
justify-content:center;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-evenly;
align-content:space-evenly;
TEST
TEST
TEST
TEST
TEST
TEST
※↑IE11ではspace-evenlyは効かない模様
space-evenly が効くのはFirefox52以降、Chrome60以降だけのようです。（現時点）
「start」「end」「left」「roght」「stretch」「baseline」等のプロパティ指定は、サポートされていないブラウザも多いようです。
flexbox は、折返し位置が、親要素と子アイテムのサイズの関係で決まるのがちょっと悩ましいところ
例えば上記の例で、幅を広げてしまうと
justify-content:center;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
うんと小さい子アイテムを均等配置するには・・・
margin・paddingで調整するか、折返したいところで親要素を二段に分けるか、ですかね。
マージンを広げてみた
justify-content:space-around;
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
TEST
TEST
TEST
TEST
TEST
TEST
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-evenly;
align-content:space-evenly;
TEST
TEST
TEST
TEST
TEST
TEST
※↑IE11ではspace-evenlyは効かない模様
space-evenly が効くのはFirefox52以降、Chrome60以降だけのようです。（現時点）
「start」「end」「left」「roght」「stretch」「baseline」等のプロパティ指定は、サポートされていないブラウザも多いようです。
flexbox は、折返し位置が、親要素と子アイテムのサイズの関係で決まるのがちょっと悩ましいところ
例えば上記の例で、幅を広げてしまうと
justify-content:center;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
うんと小さい子アイテムを均等配置するには・・・
margin・paddingで調整するか、折返したいところで親要素を二段に分けるか、ですかね。
マージンを広げてみた
justify-content:space-around;
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
TEST
TEST
TEST
TEST
TEST
TEST
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-evenly;
align-content:space-evenly;
TEST
TEST
TEST
TEST
TEST
TEST
※↑IE11ではspace-evenlyは効かない模様
space-evenly が効くのはFirefox52以降、Chrome60以降だけのようです。（現時点）
「start」「end」「left」「roght」「stretch」「baseline」等のプロパティ指定は、サポートされていないブラウザも多いようです。
flexbox は、折返し位置が、親要素と子アイテムのサイズの関係で決まるのがちょっと悩ましいところ
例えば上記の例で、幅を広げてしまうと
justify-content:center;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
うんと小さい子アイテムを均等配置するには・・・
margin・paddingで調整するか、折返したいところで親要素を二段に分けるか、ですかね。
マージンを広げてみた
justify-content:space-around;
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
TEST
TEST
TEST
TEST
TEST
TEST
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-evenly;
align-content:space-evenly;
TEST
TEST
TEST
TEST
TEST
TEST
※↑IE11ではspace-evenlyは効かない模様
space-evenly が効くのはFirefox52以降、Chrome60以降だけのようです。（現時点）
「start」「end」「left」「roght」「stretch」「baseline」等のプロパティ指定は、サポートされていないブラウザも多いようです。
flexbox は、折返し位置が、親要素と子アイテムのサイズの関係で決まるのがちょっと悩ましいところ
例えば上記の例で、幅を広げてしまうと
justify-content:center;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
うんと小さい子アイテムを均等配置するには・・・
margin・paddingで調整するか、折返したいところで親要素を二段に分けるか、ですかね。
マージンを広げてみた
justify-content:space-around;
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
TEST
TEST
TEST
TEST
TEST
TEST
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-evenly;
align-content:space-evenly;
TEST
TEST
TEST
TEST
TEST
TEST
※↑IE11ではspace-evenlyは効かない模様
space-evenly が効くのはFirefox52以降、Chrome60以降だけのようです。（現時点）
「start」「end」「left」「roght」「stretch」「baseline」等のプロパティ指定は、サポートされていないブラウザも多いようです。
flexbox は、折返し位置が、親要素と子アイテムのサイズの関係で決まるのがちょっと悩ましいところ
例えば上記の例で、幅を広げてしまうと
justify-content:center;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
うんと小さい子アイテムを均等配置するには・・・
margin・paddingで調整するか、折返したいところで親要素を二段に分けるか、ですかね。
マージンを広げてみた
justify-content:space-around;
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
TEST
TEST
TEST
TEST
TEST
TEST
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-evenly;
align-content:space-evenly;
TEST
TEST
TEST
TEST
TEST
TEST
※↑IE11ではspace-evenlyは効かない模様
space-evenly が効くのはFirefox52以降、Chrome60以降だけのようです。（現時点）
「start」「end」「left」「roght」「stretch」「baseline」等のプロパティ指定は、サポートされていないブラウザも多いようです。
flexbox は、折返し位置が、親要素と子アイテムのサイズの関係で決まるのがちょっと悩ましいところ
例えば上記の例で、幅を広げてしまうと
justify-content:center;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
うんと小さい子アイテムを均等配置するには・・・
margin・paddingで調整するか、折返したいところで親要素を二段に分けるか、ですかね。
マージンを広げてみた
justify-content:space-around;
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
TEST
TEST
TEST
TEST
TEST
TEST
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
うんと小さい子アイテムを均等配置するには・・・
margin・paddingで調整するか、折返したいところで親要素を二段に分けるか、ですかね。
マージンを広げてみた
justify-content:space-around;
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
TEST
TEST
TEST
TEST
TEST
TEST
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:center;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-between;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
うんと小さい子アイテムを均等配置するには・・・
margin・paddingで調整するか、折返したいところで親要素を二段に分けるか、ですかね。
マージンを広げてみた
justify-content:space-around;
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
TEST
TEST
TEST
TEST
TEST
TEST
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-between;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
うんと小さい子アイテムを均等配置するには・・・
margin・paddingで調整するか、折返したいところで親要素を二段に分けるか、ですかね。
マージンを広げてみた
justify-content:space-around;
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
TEST
TEST
TEST
TEST
TEST
TEST
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:center;
align-content:stretch;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:stretch;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
うんと小さい子アイテムを均等配置するには・・・
margin・paddingで調整するか、折返したいところで親要素を二段に分けるか、ですかね。
マージンを広げてみた
justify-content:space-around;
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
TEST
TEST
TEST
TEST
TEST
TEST
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
justify-content:space-around;
align-content:space-around;
TEST
TEST
TEST
TEST
TEST
TEST
うんと小さい子アイテムを均等配置するには・・・
margin・paddingで調整するか、折返したいところで親要素を二段に分けるか、ですかね。
マージンを広げてみた
justify-content:space-around;
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
TEST
TEST
TEST
TEST
TEST
TEST
align-content:space-around;
O
O
O
O
O
O
こんなレイアウトは通常ありえないか(^ｍ^;)
コメント
[…] https://pandaignis.com/wp/38851.html http://www.webdesign-fan.com/ajaxzip3 フレックスボックスでのボックス配置 – CSS: カスケーディングスタイルシート | MDNhttps://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox h […]