CSS3 Flexbox
排版工具

qiita.rb

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"></meta>
	<!-- 手機的縮放設定 -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<title>britney spears</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
	<nav>
		<div class="logo">text you or do not text you</div>
		<div class="menu">when i text you i miss you</div>
		<div class="user">when i do not text you i am waiting for you to miss me</div>
	</nav>
	<!-- flex 如何解決并排切欄，水平對齊，垂直對齊的問題 -->
	<main>
		<div class="item">love</div>
		<div class="item">when the power of love overcomes the love </div>
		<div class="item">the world will know peace</div>
	</main>
</body>
</html>

style.css

qitta.rb

body{margin:0px;}
/* nav 仰視設定 */
nav{
	display:flex;
}
nav>.logo{
	/* 沒有彈性 固定尺寸 */
	flex:none;width:400px;
	background-color:#ffcccc;
}
nav>.menu{
	/* 無固定尺寸 自動張滿 flex: auto */
	flex: auto;
	background-color: #ccccff;
}
nav>.user{
	flex:none; width: 400px;
	background-color: #ccffcc;
}

/* main 樣式設定 */
/* 容器 顯示模式 flex */
/* 水平對齊 justify-content: flex-start */
/* justify-content: center */
/* justify-content: flex-end */
/* align-items 垂直對齊 */
main{
	display: flex;
	justify-content:center;
	align-items: stretch;
	background-color: #cccccc;
}
/* 項目 flex 属性none 没有办法弹性自动缩放　解決并排切蘭問題 */
main>.item{
	flex:none;
	width:300px; margin:10px;
	background-color: #ffcccc;
}