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;
}