flex圣杯布局及区别

flex圣杯布局

flex意为弹性盒子布局

利用flex布局来完圣杯布局要比利用定位完成圣杯布局更加的简单通俗易懂

下图：

* {
	margin: 0;
	padding: 0;
  }

.box {
	position: relative;
	width: 80%;
	height: 80px;
	background-color: #ccc;
	margin: 50px auto;
  }
.right,
.left{
     position: absolute;
     width: 80px;
     height: 80px;
     top: 0;
     right: 0;
     background-color: yellow;
}
.right{
     position: absolute;
     left: 0;
 }
.center{
     height: 80px;
	 background-color: blue;
	 margin: 0 100px;
}

<div class="box">
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
</div>

定位要个每个设置盒子定位，还要设置其他的属性，看着就很繁杂。利用flex布局就不同了

下图：

      *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 80%;
            height: 80px;
            margin: auto;
            display: flex;
            /* 设置主轴上的子元素排列方式，space-between先贴两边在平分剩余空间 */
            justify-content: space-between;
        }
        .left,
		.right {
			width: 80px;
			height: 80px;
			background-color: hotpink;
		}
        .center {
            /* 占一份 */
			flex: 1;
			margin: 0 10px;
			background-color: red;
		}

利用flex布局只需要设置三个属性，而且通俗易懂