欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css flex应用

程序员文章站 2022-03-02 18:05:49
...
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 css html

上一篇： CSS-Flex布局

下一篇： tcp协议下的套接字编程(小哥哥-小姐姐私密聊天)

推荐阅读