プログラム学習室
ここがナビ

HTML/CSS: flexbox

このホームページでの使用例

このホームページでレイアウトで使用している flaxbox を紹介します。
header
kanban
topurl
nav
sidemenu
maintext

左右中央に表示 justify-content: center;

コンテンツ表示域を画面の左右中央に表示します
コンテンツ表示域

HTML

					<div id="f1-body">
						<div id="f1-container">
								コンテンツ表示域
						</div>
					</div>
				

CSS

					#f1-body {
						display: flex;
						justify-content: center;
						height: 100px;
						width: 500px;
						background-color: gray;
					}
					#f1-container {
						width:460px;
						background-color:	#ffffff;
						border: solid 1px gray;
					}
				
 justify-content: center; で中に表示されるボックスを中央に持ってきます

上から順番に表示 flex-direction: column;

上から順番にボックスを表示します
header
コンテンツ表示域

HTML

					<div id="f2-container">
						<div id="f2-header">
							header
						</div>
						<div id="f2-contents">
							コンテンツ表示域
						</div>
						<div id="f2-footer">
							footer
						</div>
					</div>
				

CSS

					#f2-container {
						display: flex;
						flex-direction: column;
						width:460px;
						background-color:	#ffffff;
						border: solid 1px gray;
					}
					#f2-header {
						height: 2rem;
						background:linear-gradient(to right, #ddffff, #3366ff);
					}
					#f2-contents {
						height: 3rem;
						background-color: #ffffff;
					}
					#f2-footer {
						height: 2rem;
						background:linear-gradient(to bottom, mediumblue, #000040);
						color:lightyellow;
					}				
				
flex-direction: column; でボックスが上から順番に並びます

左右に表示 flex-direction: row;

左右にボックスを表示します
sidemenu
maintext

HTML

					<div id="f3-contents">
						<div id="f3-sidemenu">sidemenu</div>
						<div id="f3-maintext">maintext</div>
					</div>
				

CSS

					#f3-contents {
						display: flex;
						animation-direction: row;
						width: 460px;
						height: 3rem;
						border: solid 1px gray;
					}
					#f3-sidemenu {
						width: 90px;
						border-right:1px solid #550000;
						background-color: #ffff88;
					}
					#f3-maintext {
						margin-left: 1em;
						margin-bottom: 1em;
					}
				
flex-direction: row; でボックスが左右に並びます Excel の行列方向とは逆の感覚になります