<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<title>test</title>
<style type="text/css">
.bg-red{
background-color: red;
}
.bg-blue{
background-color: blue;
}
.bg-yellow{
background-color: yellow;
}
.box{
display: flex;
justify-content: space-between;
flex-direction : column;
width: 200px;
height: 200px;
background-color: grey;
}
.item{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}
.item:nth-child(2){
align-self: center;
}
.item:nth-child(3){
align-self: flex-end;
}
.m-l-20{
margin-left: 20px;
}
.m-t-20{
margin-top: 20px;
}
.box1{
display: flex;
justify-content: flex-end;
width: 200px;
height: 200px;
background-color: grey;
}
.item1{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}
.item1:nth-child(4){
align-self: flex-end;
}
.box2{
display: flex;
flex-wrap: wrap;
align-content: space-between;
width: 200px;
height: 200px;
background-color: grey;
}
.column{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.item2{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}
.Grid {
width: 100%;
height: 200px;
display: flex;
}
.Grid-cell {
flex: 1;
}
.Grid-cell.u-full {
flex: 0 0 100%;
}
.Grid-cell.u-1of2 {
flex: 0 0 50%;
}
.Grid-cell.u-1of3 {
flex: 0 0 33.3333%;
}
.Grid-cell.u-1of4 {
flex: 0 0 25%;
}
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
flex: 1;
}
.HolyGrail-body {
display: flex;
flex: 4;
text-align: center;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
}
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
.Media {
display: flex;
align-items: flex-start;
}
.Media-figure {
margin-right: 1em;
}
.Media-body {
flex: 1;
}
.parent {
width: 200px;
height: 150px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="box1 m-t-20">
<span class="item1"></span>
<span class="item1"></span>
<span class="item1"></span>
<span class="item1"></span>
</div>
<div class="box2 m-t-20">
<div class="column">
<span class="item2"></span>
<span class="item2"></span>
</div>
<div class="column">
<span class="item2"></span>
<span class="item2"></span>
</div>
<div class="column">
<span class="item2"></span>
<span class="item2"></span>
</div>
</div>
<h4>网格布局</h4>
<div class="Grid">
<div class="Grid-cell u-1of4 bg-yellow">1</div>
<div class="Grid-cell bg-red">2</div>
<div class="Grid-cell u-1of3 bg-blue">3</div>
</div>
<h4>圣杯布局</h4>
<div class="HolyGrail">
<header class="bg-red">head</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content bg-yellow">main</main>
<nav class="HolyGrail-nav bg-blue">nav</nav>
<aside class="HolyGrail-ads bg-blue">aside</aside>
</div>
<footer class="bg-red">footer</footer>
</div>
<h4>输入框的布局</h4>
<div class="InputAddOn">
<span class="InputAddOn-item">1</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">提交</button>
</div>
<h4>悬挂式布局</h4>
<div class="Media">
<span>1</span>
<div class="Media-body">...</div>
</div>
<h4>流式布局</h4>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
网友评论