CSS flex 2段組 (1)

<style>
body {
	max-width: 900px;        /* 適当に指定 */
	background: #bbc;
}

main, nav, header, footer {
	background: #fff;
	margin: 5px;
	padding: 0.5em;
	box-sizing: border-box;  /* 幅を padding も含めた幅にする */
}

.flex {
	display: flex;           /* フレックスボックスにする */
	/* flex-direction: row;  /* 省略可。初期値が row */
	/* flex-direction: row-reverse;  /* 参考:右から左へ並べる。左が nav、右が main になる */
}

main {
	flex: auto;              /* 可変幅。flex: 1 1 auto; と同じ。flex-grow と flex-shrink を 1 にする。  */
	padding-bottom: 10em;
}

nav {
	flex: 0 0 250px;         /* 固定幅。flex-grow と flex-shrink を 0 にする。 */

	/* width: 250px;  (誤り) width だけだと固定幅にならない */
}
</style>

<header>header ヘッダー領域</header>

<div class="flex">
	<main>
	main 可変幅<br/>
	flex: 1 1 auto;<br/>
	<h1>CSS flex 2段組 (1)</h1>
	あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50
	</main>

	<nav>
	nav 目次: 固定幅<br/>
	flex: 0 0 250px;<br/>
	<br/>
	あいうえおかきくけ10さしすせそ
	</nav>
</div>

<footer>footer フッター領域</footer>

(2020/08-2023/07)
動作     : Edge106

◎ノート

・MDN: CSS フレックスボックスレイアウト

・flex-direction: row; で内部のブロック要素を左から右に並べる。
  MDN: flex-direction

・flex-direction: row-reverse;
  このサンプルで  flex-direction: row-reverse; にすると目次が左側、
  本文が右側になります。
  nav と main の並び順を変えても同じですが、main が HTML の最初に
  現れる利点があります。音声の読み上げで最初に目次を読み上げると
　いったことが起こりません。