flex布局的简单实例

最新推荐文章于 2022-04-19 11:51:59 发布

-朝汐-

最新推荐文章于 2022-04-19 11:51:59 发布

阅读量520

点赞数 1

分类专栏： web前端文章标签： flex @media 自适应

本文链接：https://blog.csdn.net/weixin_40679158/article/details/90548328

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习flex布局对于移动端的适应是十分重要的，可以大量减少重复性代码的编写。

推荐到菜鸟教程进行学习

这里主要实现了一个简单的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Flex布局测试</title>
		<style type="text/css">
			html,body{
				height: 100%;
			}
			body,p,h1,h2,h3{
				padding: 0;
				margin: 0;
			}
			.content{
				display: flex;
				background-color: #EEEEEE;
				flex-flow: column;
				height: 100%;
			}
			.main{
				flex: 1;
				display: flex;
				padding: 20px;
				flex-flow: row wrap;
				justify-content: space-around;
			}
			.main .mainItem{
				padding: 8px;
				box-sizing: border-box;
				height: 50%;
				width: 33.3%;
			}
			.main .topbar{
				padding: 8px;
				box-sizing: border-box;
				height: 50%;
				width: 66.6%;
			}
			.main .mainItem>div,.main .topbar>div{
				height: 100%;
				width: 100%;
				border-radius: 8px;
				box-shadow: 1px 1px 2px 2px lightgrey;
			}
			/*.main .mainItem>div:hover{
				box-shadow: 0px 0px 6px 2px lightgrey;
			}*/
			.footer{
				height: 60px;
				background-color: #fff;
    			box-shadow: 0px 0px 4px 2px lightgrey;
				width: 100%;
				display: flex;
				box-sizing: border-box;
				justify-content: space-around;
			}
			.footer .foot_item{
				height: 60px;
				width: 60px;
				box-sizing: border-box;
				padding: 5px;
				display: inline-block;
				text-align: center;
				
			}
			.footer .foot_item a{
				text-decoration: none;
				color: gray;
				display: inline-block;
				height: 50px;
				line-height: 50px;
				font-size: 14px;
				align-self: center;
			}
			@media only screen and (min-width: 100px) and (max-width: 640px) {
				.check{
					width: 50%!important;
					height: 33.3%!important;
				}
				.topcheck{
					width: 100%!important;
					height: 33.3%!important;
					padding-bottom: 0px!important;
				}
				.maincheck{
					padding: 0px!important;
				}
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="main maincheck">
				<div class="topbar topcheck">
					<div  style="background-color: coral;"></div>
				</div>
				<div class="mainItem check">
					<div style="background-color: lightblue;"></div>
				</div>
				<div class="mainItem check">
					<div style="background-color: khaki;"></div>
				</div>
				<div class="mainItem check">
					<div style="background-color: pink;"></div>
				</div>
				<div class="mainItem check">
					<div style="background-color: lightgray;"></div>
				</div>
				<!--<div class="mainItem check">
					<div style="background-color: lightblue;"></div>
				</div>-->
			</div>
			<div class="footer">
				<div class="foot_item">
					<a href="index.html">首页</a>
				</div>
				<div class="foot_item">
					<a href="forum.html">论坛</a>
				</div>
				<div class="foot_item">
					<a href="setting.html">设置</a>
				</div>
			</div>
		</div>
	</body>
</html>