利用html5语义化标签，创建一个简单的页面布局，html 代码：
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<header>
<nav>
<li><a href="#" class="logo">Logo</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</nav>
<button>Button</button>
</header>
<div class="main-sidebar-wrapper">
<section class="main">Main Content</section>
<aside class="sidebar">Sidebar</aside>
</div>
<footer>
<span>Made by Chilam</span>
</footer>
</body>
</html>
主要是利用flexbox的CSS:
.main-sidebar-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.main {
flex: 3; // width, 3:1
margin-right: 10px;
border: solid red 2px;
height: 80vh;
}
.sidebar {
flex: 1;
border: solid blue 2px;
height: 80vh;
}
@media (max-width: 600px) { //媒介查询 当flex-direction为列时，width: 100%有发挥作用，当flex-direction为行时，height: 100vh发挥铺满屏效果
.main-sidebar-wrapper {
flex-direction: column;
}
.main {
margin-right: 0;
margin-bottom: 60px;
width:100%;
}
.sidebar {
width:100%;
}
}
header {
display: flex;
justify-content: space-between;
}
header nav {
display: flex;
align-items: baseline;//这两句来对其导航条
}
header nav li {
list-style: none;
margin-right: 10px;
}
header nav li a{
text-decoration: none;//链接去掉下划线
}
header nav li .logo {
font-size: 34px;
}
header button {
height: 20px;
}
footer {
display: flex;
flex-direction: row;
justify-content: center;
border: solid green 2px;
height: 9.5vh;
}
1. 给任何容器设置其 display: flex ,注意此容器的子元素的float, clear , vertical-align属性将失效
2.flex-direction: 有row（default), column
3.用justify-content和align-items来进行水平和垂直居中，row和column不同，效果不同
响应式 布局flexbox grid , css grid
4305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
