<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
html *{
padding: 0;
margin: 0;
}
.layout article div{
min-height: 100px;
}
.d1{
display: flex; /*设置为弹性布局*/
flex-direction: row; /*设置主轴的方向(row | row-reverse | column | column-reverse)*/
flex-wrap: wrap; /*设置换行方式(flex-wrap: nowrap | wrap | wrap-reverse)*/
justify-content: center; /*设置在主轴上的对齐方式(flex-start | flex-end | center | space-between | space-around)*/
align-items: center; /*设置在交叉轴上的对齐方式(flex-start | flex-end | center | baseline | stretch)*/
/*设置多轴线的对齐方式,如果项目只有一根轴线,该属性不起作用(flex-start | flex-end | center | space-between | space-around | stretch)*/
/*align-content: center;*/
width: 100%;
height: 200px;
background-color: #F1F1F1;
}
.child{
width: 200px;
height: 50px;
background-color: red;
margin-left: 10px;
}
</style>
</head>
<body>
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top: 100px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex:1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flex解决方案</h2>
<p>http://www.runoob.com/w3cnote/flex-grammar.html</p>
</div>
<div class="right"></div>
</article>
</section>
<section style="margin-top: 50px">
<div class="d1">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</section>
</body>
</html>