`${($=>$=>$=>$)`$``$``$`}`

Tag ➽ Flexbox

Trouble
flexbox 内の SVG 画像のサイズ
普段あまり SVG 画像を使わないということもあってか flexbox と組み合わせたときに予想外な動きになって困りました

<!doctype html>

<style>
	.row {
		display: flex;
	}
</style>

<div class="row">
	<div><img src="00.svg"></div>
	<div>00.svg</div>
</div>
<div class="row">
	<div><img src="01.svg"></div>
	<div>01.svg</div>
</div>

[00.svg]
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#ffc8aa" />
  <circle cx="100" cy="100" r="80" fill="#b45829" />
  <text x="100" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

[01.svg]
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#ffc8aa" />
  <circle cx="100" cy="100" r="80" fill="#b45829" />
  <text x="100" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

このページを表示すると 00.svg は期待通りに表示されますが 01.svg は表示されません
01.svg の img のサイズが 0x0 になって何も表示されないです

(確認用)

img に height: 100% を設定すると 高さを行の高さにでき それに合わせて幅も確保され表示されるようになりますが 親の div のサイズは幅が 0 なのは変わらず 文字と画像が重なります

画像は全部こうなのかと思いましたが PNG などではならなかったです
また SVG でも これが発生する SVG 画像と発生しない SVG 画像がありました
違いを探すと 00.svg と 01.svg のように viewBox か width+height かの違いでした
viewBox を使う場合は width と height は決まっていないので flexbox の中で自動で計算される場合は最小の 0x0 になるようです
width と height があればそれが画像サイズとなるのでちゃんと表示されます

SVG 画像側に width と height がないなら img タグの属性側に viewBox に合わせた width と height をつければ解決できます
ただしその場合 CSS で max-width を指定しても属性で指定しただけの height が確保されてしまうような違いが出ます
可能なら SVG ファイルの方に width と height を追加したほうが良さそうです
Elementary
flexbox を折り返したときに両端に配置する
(a) や (b) が何らかの要素で↓のように両端に配置したいです
「|」←が画面端です

|(a)(b)         (c)(d)|
|                     |

画面幅が小さくてはみ出る場合は折り返しをしたいです
ただし

|(a)(b)               |
|(c)(d)               |
|                     |

のようにならず複数行でも両端にあってほしいです

|(a)(b)               |
|               (c)(d)|
|                     |

単純に折り返すだけだとこういうのです

<style>
	.container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	.item {
		width: 200px;
		border: 1px solid #0003;
		background: #ddf;
		flex: none;
	}
	.margin {
		margin: auto;
	}
</style>

<div class="container">
	<div class="item">a</div>
	<div class="item">b</div>
	<div class="margin"></div>
	<div class="item">c</div>
	<div class="item">d</div>
</div>

c と d の間で折り返されたくないので div にまとめます
また .margin 要素が b の隣で幅いっぱいになるだけで c が右揃えにならないので c の margin-left が auto になるようにします

<style>
	.container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	.subcontainer {
		display: flex;
		gap: 10px;
	}
	.item {
		width: 200px;
		border: 1px solid #0003;
		background: #ddf;
		flex: none;
	}
	.margin {
		margin: auto;
	}
	.margin + * {
		margin-left: auto;
	}
</style>

<div class="container">
	<div class="item">a</div>
	<div class="item">b</div>
	<div class="margin"></div>
	<div class="subcontainer">
		<div class="item">c</div>
		<div class="item">d</div>
	</div>
</div>

space-between を使って両端揃えすると折り返しても 末尾が右揃えになってうまく行ったりしないかなと思ったのですがダメでした

<style>
	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px;
	}
	.subcontainer {
		display: flex;
		gap: 10px;
	}
	.item {
		width: 200px;
		border: 1px solid #0003;
		background: #ddf;
		flex: none;
	}
</style>

<div class="container">
	<div class="left subcontainer">
		<div class="item">a</div>
		<div class="item">b</div>
	</div>
	<div class="right subcontainer">
		<div class="item">c</div>
		<div class="item">d</div>
	</div>
</div>

この場合でも .right に margin-left: auto を付ける必要があります
Trouble
深いネストで全部自動で広げたい
こういう構造で

<div class="a">
	<div class="b1">message</div>
	<div class="b2">
		<div class="c1">message</div>
		<div class="c2">
			<div class="d1">message</div>
			<div class="d2">
				<div class="e1">message</div>
				<div class="e2">
					spread max
				</div>
			</div>
		</div>
	</div>
</div>

外側の a はサイドバーみたいなもので ウィンドウサイズに応じて高さが変わって 子孫要素の大きさは関係なく親に応じてサイズが変わる
そのときに一番深い e2 の div が下の隙間いっぱいに広がってほしい

高さ固定は無理だし JavaScript でリサイズごとに高さ指定もしたくない
となると CSS で全部 flexbox 化するしかなさそう

.a, .b2, .c2, .d2 {
	display: flex;
	flex-flow: column nowrap;
}

.b2, .c2, .d2, .e2 {
	flex: 1 1 auto;
}

むやみに flexbox 増やすと思わぬ動きしたり困ること多いし もっと楽で良い方法ってないものかなー
e2 を広げる以外に b2, c2, d2 を flexbox にする必要ないんだけど
Trouble
Chrome で flex item に height 指定しないと子要素が 100% にならない
WebComponents の slot 関係で複雑になってたので久々にはまった
シンプルにするとこれで #content の高さ 100% が効かない

<!doctype html>

<style>
	body {
		margin: 0;
	}

	#root {
		width: 100vw;
		height: 100vh;
	}

	#flex-host {
		display: flex;
		flex-flow: column nowrap;
		width: 100%;
		height: 100%;
	}

	#flex-item {
		flex-grow: 1;
	}

	#content {
		width: 100%;
		height: 100%;
		background: palegoldenrod;
	}
</style>

<div id="root">
	<div id="flex-host">
		<section id="flex-item">
			<div id="content">text</div>
		</section>
	</div>
</div>

#flex-item はウィンドウ全体のサイズになってるけど
#content は 「text」 の文字分の高さだけになってる
100% にするには #flex-item に height を適当に指定すればいい
grow で広がるからとりあえず height: 0 でも大丈夫

たぶん Chrome のバグで Firefox だと height 入れなくても 100% になってる