使用flex写几个简单布局
flex布局小游戏
http://www.flexboxdefense.com/
1.手机页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex手机页面基本布局</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div id="container">
<header>header</header>
<main>
<p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p>
<p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p><p>main</p>
</main>
<footer>
<ul>
<li>按钮</li>
<li>按钮</li>
<li>按钮</li>
<li>按钮</li>
</ul>
</footer>
</div>
</body>
</html>*{margin:0;padding:0;}
ul,li{list-style:none}
#container{
height:100vh;
background:#ccc;
display: flex;
flex-direction:column;
}
header{
height:50px;
background:#aaaad1;
}
main{
overflow:auto;
}
footer{
height:80px;
}
ul{
display: flex;
height:100%;
}
ul>li{
border:1px solid black;
flex:1;
height:100%;
background:red;
}
main部分设置了overflow:auto之后，出现滚动条，header和下方按钮固定
演示地址：http://js.jirengu.com/saqulus...
2.产品列表
例如九个产品，每行三个展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex产品布局</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>*{margin:0;padding:0;}
ul,li{list-style:none}
ul{
width:350px;
margin:0 auto;
display: flex;
border:1px solid black;
background:#ddd;
flex-wrap:wrap;
justify-content:space-between;
}
li{
width:100px;
height:100px;
background:#ccc;
border:1px solid red ;
margin:10px 0;
}
演示地址：http://js.jirengu.com/xecuqam...
3.PC布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>header</header>
<div class="content">
<div class="aside">aside固定宽度</div>
<div class="main">main自动填充宽度</div>
<div class="nav">nav固定宽度</div>
</div>
<footer>footer</footer>
</body>
</html>header,footer{
height:100px;
background:#ccc;
}
.content{
display:flex;
}
.content .aside{
width:250px;
background:red;
}
.content .main{
height:500px;
flex:1;
}
.content .nav{
width:250px;
background:green;
}
flex:1,自动填充宽度。
4.完美居中
.content{
display:flex;
justify-content:center;
align-items:center;
}不管里面的子元素宽高是多少，都在垂直和水平方向居中。
布局的套路
口诀
float：
- 儿子全加 float: left （right）
- 老子加 .clearfix
flex：
- 老子加 display: flex
- 老子加 justify-content: space-between;
如果宽度不够，可以用 margin: 0 -4px;
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}原则
- 不到万不得已，不要写死 width 和 height
- 尽量用高级语法，如 calc、flex
- 如果是 IE，就全部写死
例如我们要做一个上面这样设计稿的布局
浮动布局套路
套路：
- 儿子全加
float: left（right） - 老子加
.clearfix
.clearfix:after{
content: '';
display: block;
clear: both;}
.clearfix{
zoom: 1;}
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float布局套路</title>
</head>
<body>
<div class="father clearfix">
<div class="child1 child">儿子1</div>
<div class="child2 child">儿子3</div>
</div>
</body>
</html>.child{
float:left;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
.father{
border:1px solid black;
}
.child1{
width:30%;
background:red;
}
.child2{
background:yellow;
width:70%;
}
可以看到不管如何拉长，child1和child2永远占30%和70%。且两个child DIV只用来布局，然后内容写在里面，如果要加padding等边距，就得在里面再写一个div，child相当于是一个套在外面的wrapper，用来布局。
演示地址：http://js.jirengu.com/socoget...
使用float布局的时候，要分清布局块和内容块！
例子：简单的头部导航布局
演示地址：http://js.jirengu.com/wabuluz...
举例使用：用float做平均布局
宽800的div上显示8张图，每列四张。
演示地址：
http://js.jirengu.com/casodig...
加一个wrapper的作用是使用负margin扩大8像素，为了不与外面的pics冲突（pics用来布局，居中）所以再包裹一个div。又一次显示出布局块和内容块的区别。
如果使用flex布局，只需要三行代码。
diaplay：flex;
flex-wraP:wrap;
justify-content:space-between;自动平均布局。
使用calc
width是194px，定死的。如果不自己算picture的宽度
那么就可以使用width：calc(25% - 8px)
左右不一样比例的布局
1:3使用float：
<div class="father clearfix">
<div class="child left"></div>
<div class="child right"></div>
</div>CSS:
.clearfix::after{
content:'';
display:block;
clear:both;
}
.father{
width:500px;
background: #red;
border:1px solid red;
}
.child{
height:200px;
float: left;
}
.left{
width:33.33333%;
background: #ccc;
}
.right{
width:66.66666%;
background: #777;
}如果想在1:3的块之间加空隙，那么这个已经成比例的布局块不要动，在里面加div,然后里面的div加上margin-right就行了。还有一种方法就是width:cacl(33.3333% - 20px).
使用flex：
<div class="father2">
<div class="child2 left2"></div>
<div class="child2 right2"></div>
</div>.father2{
width:500px;
border:1px solid red;
display:flex;
}
.child2{
height:200px;
}
.left2{
flex:1;
background: #ccc;
border:1px solid green;
}
.right2{
flex:0 0 33.3333%;
background: #777;
border:1px solid blue;
}关键在于：
flex:1自动占满剩余空间！flex:0 0 33.3333%固定宽度为33.3333%！
或者也可以直接父亲display：flex，儿子1width:cacl(33.3333% - 20px),儿子2width:cacl(66.6666%)
演示地址：
http://js.jirengu.com/qovefuw...
阮一峰的flex布局实例教程：
http://www.ruanyifeng.com/blo...
手机布局
在需要修改的地方加上媒体查询，然后修改相关CSS。主要需要修改的是width：auto,直到左右不能滑动为止。
请看我的博客，媒体查询CSS5:移动端页面(响应式)
图片处理技巧
为了防止图片收缩，尽量不要使用img标签，使用div标签然后使用
background：transparent url('xxx') no-repeat center;
background-size:cover;尽量完整显示图片
练习
分别用float和flex实现左右布局
如图：
float:
http://js.jirengu.com/goqebat...
flex:
http://js.jirengu.com/folonow...
做一个平均布局
请打开这个 jsbin，完善代码，
要求用 float + 负 margin 做一个平均布局
演示地址：
http://js.jirengu.com/jaxepij...
把上面的布局用 flex 实现
http://js.jirengu.com/huyihim...