スポンサーリンク

Flexbox 16 (justify-content/align-items/align-contentの違い)

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
こんなレイアウトは通常ありえないか(^m^;)

WEB
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク
SKILLS OF LIFE 3

コメント

  1. […] 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 […]

タイトルとURLをコピーしました