flex、绝对定位的三栏布局,以及flex的扩充

本文介绍使用Flex布局及绝对定位实现响应式三栏布局的方法,并通过媒体查询确保不同屏幕尺寸下的良好显示效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在上一篇文章写了两栏等高、双飞翼和圣杯三栏布局。今天来继续完善三栏布局方式以及对flex布局继续完善。

三栏布局依然是下面这样。

图像

flex

<section class='body'>
	<artical class='content'>content</artical>
	<aside class='left'>left</aside>
	<aside class='right'>right</aside>
</section>
.body {display: flex;}
.left,.right {/*左右两列定宽200px*/flex:0 0 200px;height: 200px;background-color: pink;}
.left{order:-1}
.content {flex:1;height: 200px;background-color: yellow;}

绝对定位

<section class='body'>
	<aside class='content'>content</aside>
	<aside class='left'>left</aside>
	<aside class='right'>right</aside>
</section>
.body{position:relative;min-width:500px}
.content,.left,.right{height:200px;top:0}
.left,.right{background:pink;position:absolute;width:200px}
.left{left:0}
.right{right:0}
.content{margin:0 200px 0 200px;background:red}

上面用flex弹性盒子和position:absolute绝对定位完成了三栏布局,下面将对flex组成的三栏布局进行扩充,成下面这样

以下是相关代码

<header>header</header>
	<section class='body'>
		<article class='content'>content</article>
		<aside class='left'>left</aside>
		<aside class='right'>right</aside>
	</section>
<footer>footer</footer>
body{min-height:100vh;display:flex;flex-direction: column;}
header,footer{flex:1}
header{background:red}
footer{background:blue}
.body{flex:3;display:flex}
.content,.left,.right{}
.left,.right{flex:0 0 12rem}
.left{background:pink;order:-1}
.right{background:gray}
.content{background:yellow;flex:1}

下面继续来完善,当窗口缩小到768px以下时,呈现出:

只需要加上媒体查询,就可以实现上图

@media (max-width:768px){
 		.body{flex-direction:column;flex:8}
 		.left,.right{flex:1}
 		.content{flex:4}
        }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值