圣杯布局（双飞翼布局）

最新推荐文章于 2022-11-04 18:39:01 发布

@一枝梅

最新推荐文章于 2022-11-04 18:39:01 发布

阅读量177

点赞数

本文链接：https://blog.csdn.net/YiZhiMei01/article/details/84978319

版权

圣杯布局也叫双飞翼布局，优先解析中间内容区域，使用排序方式order

注：显示顺序 order （加在子元素上）默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序。
注意点：不定义order的伸缩项目会排到前面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			header{
				height: 100px;
				background: pink;
			}
			.box{
				display: flex;
				height: 200px;
				background: #CCCCCC;
			}
			.left{
				height: 200px;
				width: 100px;
				background: #000000;
			}
			.center{
				flex: 1;
				order: 1;
			}
			.right{
				width: 100px;
				height: 200px;
				background: #FF0000;
				order: 2;
			}
			footer{
				height: 100px;
				background: #9ACD32;
			}
		</style>
	</head>
	<body>
		<header>header</header>
		<div class="box">
			<div class="left"></div>
			<div class="center">简介：淘宝网是亚太地区较大的网络零售、商圈，由阿里巴巴集团在2003年5月创立。
				淘宝网是中国深受欢迎的网购零售平台，拥有近5亿的注册用户数，每天有超过6000万的固定访客，
				同时每天的在线商品数已经超过了8亿件，平均每分钟售出4.8万件商品。截止2011年年
			</div>
			<div class="right"></div>
		</div>
		<footer>footer</footer>
	</body>
</html>

@一枝梅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局（双飞翼布局）

圣杯布局也叫双飞翼布局，优先解析中间内容区域，使用排序方式order注：显示顺序 order （加在子元素上）默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序。注意点：不定义order的伸缩项目会排到前面&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UT...
复制链接

扫一扫