弹性盒子---圣杯布局
关于弹性盒子前面总结了弹性盒子的基本使用，确定主轴、对齐方式、交叉轴等。
此次是弹性盒子的其他特性，结合常用的圣杯布局来详细阐述：
圣杯布局：
- 圣杯布局是两边固定宽度，中间自适应的三栏布局。
- 中间栏放到文档流前面，先行渲染。
- 目的是为了解决三栏布局。
可以用浮动来实现，这里主要以弹性盒子的特性来实现
主要使用的是弹性盒子的剩余空间分配的特性，
flex-grow属性在块级元素中有被确定宽度中使用此属性可以将剩余的部分进行分配，
order属性用于确定位置数值越小越靠前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex弹性圣杯布局</title>
<style>
* {margin: 0;padding: 0;}
.container {
display: flex;
}
.main,.left,.right {
min-height:200px;
}
.main {
order: 0;/*用来确定左中右的位置 数小在前*/
background-color: red;
flex-grow: 1;/*主轴剩余宽度分成一份全部给到，默认为0，不放大元素*/
}
.left {
order:-1;
flex-basis: 200px;/*主轴左边固定宽度200px*/
background-color: blue;
}
.right {
order:1;
flex-basis: 300px;/*主轴右边固定宽度300px*/
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
浙公网安备 33010602011771号