FLEX实现两侧边栏固定中间自适应布局

时间：2022-11-02 20:48:46
<style type="text/css">
	#outer{
		display: flex;
		width: 100%;
		flex-flow: row nowrap;
	}
	.left,.right{
		width:200px;
		height:50px;
		background: red;
	}
	.middle{
		flex-grow: 1;          //决定如何分配剩余空间
		background: yellow;
	}
</style>
<body>
	<div id="outer">
		<div class="left">left</div>
		<div class="middle">middle</div>
		<div class="right">right</div>
	</div>

　　

标签：

相关文章