たとえば、両側で固定幅（それぞれ200px）を実現し、中央はブラウザのビューポートサイズに応じて適応します。このレイアウトは、ダブルフライングレイアウトまたはホーリーグレイルレイアウトと呼ばれます。これは、特定の宝物のレイアウトです。
1. floatを使用して、最高の互換性を実現します。コードは次のとおりです。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
.content{
width: 100%;
min-width: 600px;
padding: 0 200px;
box-sizing: border-box;
}
.content div{
float: left;
}
.center{
width: 100%;
background: blueviolet;
}
.left,.right{
width: 200px;
}
.left{
background:pink;
margin-left: -200px;
}
.right{
background:yellow;
margin-right: -100%;
}
</style>
</head>
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<body>
</body>
</html>
効果は次のとおりです
。2。シンプルなフレックスレイアウトを使用すると、コードは次のようになります。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
*{
padding: 0;
margin: 0;
border: 0;
}
.content{
width: 100%;
display: flex
}
.center{
flex-grow: 1;
background: blueviolet;
}
.left{
background:pink;
flex-basis: 200px;
}
.right{
flex-basis: 200px;
background:yellow;
}
</style>
</head>
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<body>
</body>
</html>