关于flex布局,我觉得它在布局里简直就是一匹黑马,不愧为弹性布局
阮一峰大神有一篇博客,讲的超级详细 (http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)地址献上....
下面来举例一下 我平时是什么场合派它上战场
1、左右居中
HTML
<div class="wrapper">
<div class="box"></div>
</div>
CSS
.wrapper{
display: flex;
justify-content: center;
}
2.左右上下居中
CSS
.wrapper{
display: flex;
justify-content: center;/*左右*/
align-items: center;/*上下*/
}
3.6项目
HTML
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS
.wrapper{
display: flex;
flex-wrap: wrap;
}
它还有很多很多的技能,这里我就不一一举例了,写这三个我常用的
Emm 就是这样