css flex应用

csscode

2014-11-18

div自由布局方法：

1：使用overflow:auto.

2：使用flex

具体请运行下方代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .flex-box{
        overflow: hidden;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        width: 100%; height: 300px;
        margin: 0 auto;
        color: #fff;
        text-align: center;
        font-family: 'Microsoft YaHei';
    }
    .flex1{
        width: 20%; height: 100%;
        background: #ff8989;
        display: block;
    }
    .flex2{
        -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1; /* OLD - Firefox 19- */
        -webkit-flex: 1; /* Chrome */
        -ms-flex: 1; /* IE 10 */
        flex: 1;
        background: #1bbc9b;
    }
    .flex3{
        width: 100px; height: 100%;
        background: #516d81;
    }

	.flex-box1{
        overflow: hidden;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
		flex-flow:column;
        -webkit-box-orient: horizontal;
        width: 1000px; height: 500px;
        margin: 0 auto;
        color: #fff;
        text-align: center;
        font-family: 'Microsoft YaHei';
    }
	.flex4{
        height: 20%; 
        background: #ff8989;
        display: block;
    }
    .flex5{
        -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1; /* OLD - Firefox 19- */
        -webkit-flex: 1; /* Chrome */
        -ms-flex: 1; /* IE 10 */
        flex: 1;
        background: #1bbc9b;
    }
    .flex6{
        height: 200px;
        background: #516d81;
    }

	.over_style{
		height:100px;
	}
	.left{
		height:100%;
		width:20%;
		float:left;
		background-color:#FF0000;
	}
	.right{
		height:100%;
		width:200px;
		float:right;
		background-color:#00FF00;
	}
	.center{
		height:100%;
		overflow:auto;
		background-color:#0000FF;

	}
</style>
<body>
    <p>你可以改变屏幕宽度查看效果</p><br><br>

    <p>flex宽度自适应</p>
    <div class="flex-box">
        <div class="flex1">flex1 <br> 我的宽度为父级的20%；</div>
        <div class="flex2">flex2 <br> 我的宽度为父级宽-(flex1+flex3)；</div>
        <div class="flex3">flex3 <br> 我的宽度为父级的20%；</div>
    </div>

<br><br><br><br>

    <p>overflow自适应</p>
    <div class="over_style">
        <div class="left">left <br> 我的宽度为父级的20%；</div>
        <div class="right">right <br> 我的宽度为200px；</div>
        <div class="center">center <br> 我的宽度为父级宽-(flex1+flex3)；</div>
    </div>

<br><br><br><br>

	
    <p>flex高度自适应</p>
	<div class="flex-box1">
        <div class="flex4">flex1 <br> 我的高度为父级的20%；</div>
        <div class="flex5">flex2 <br> 我的高度为父级高-(flex1+flex3)；</div>
        <div class="flex6">flex3 <br> 我的高度为定高200px；</div>
    </div>
</body>
</html>

flex布局 box css display