css3 flex布局的使用

基本用法

css3学习手册链接：http://css.doyoe.com/

display:flex;

flex是Flexible的缩写，意思为弹性。在css中为flex弹性布局，可以在单行或者多行的盒子模型中有很好的用途。它可以解决很多布局的问题。比如：文字与图片垂直居中，互不干扰。
css代码：

<style>
	.warpper{
			display:flex;
			width:500px;
			height:150px;
			background-color: #f00;
			position:absolute;
			top:50%;
			left:50%;
			margin:-50px 0 0 -250px; 
			border-radius:50px;
		}
		.img{
			width:100px;
			height:100px;
			background-image: url(img/1.jpg);
			-webkit-background-size: 100% 100%;
			background-size: 100% 100%;
			margin:auto auto;
		}
		p{
			font-size:20px;
			margin:auto auto;
		}
</style>

HTML代码：

<div class="warpper">
		<div class="img"></div>
		<p>我是一串文字</p>
</div>

结果

这样就很容易的实现了需要的布局，而以前就很麻烦，需要很多的定位来实现。

可以横向居中排列，也是很轻松的可以实现
css代码

<style>
	.warpper{
	width:100%;
	height:200px;
	display:flex;
	background-color: #0ff;
	justify-content:space-around;
    }
	.box{
		width:80px;
		height:80px;
		background-color: #0f0;
		margin:auto auto;
		font-size:32px;
		color:white;
		line-height:80px;
		text-align:center;
	}
</style>

HTML代码

<div class="warpper">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">4</div>
		<div class="box">5</div>
		<div class="box">6</div>
</div>

结果

这样它就很容易有规律的横向排列了

最后，它也可以实现很多网页里面的导航栏结构
css代码：

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .warpper{
            width: 100%;
            height: 50px;
            background-color: #0ff;
        }
        ul {
            list-style: none;
            display: flex;
        }
        li {
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            flex: 1 1 auto; 
        }
    </style>

HTML代码

<div class="warpper">
    <ul>
        <li>百度</li>
        <li>京东</li>
        <li>淘宝</li>
        <li>聚美优品</li>
        <li>亚马逊</li>
        <li>美团</li>
        <li>饿了吗</li>
    </ul>
</div>

结果