圣杯布局和双飞翼布局

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

.container{
      display: flex;
    }
    .left{
      flex:0 0 200px;
      order: -1;
      background-color: #ccc;
      height: 50px;
    }
    .right{
      flex:0 0 200px;
      background-color: #333;
      height: 50px;
    }
    .center{
      flex:1;
      background-color: #369;
      height: 50px;
    }

 以上为圣杯布局

<div class="container">
		<div class="wrap item">
			<div class="center">center</div>
		</div>
		<div class="item left">left</div>
		<div class="item right">right</div>
</div>
.item {
			float: left;
		}

		.center {
			margin: 0 200px;
			height: 200px;
			background-color: #ccc;
		}

		.left {
			width: 200px;
			height: 200px;
			background-color: red;
			margin-left: -100%;
		}

		.right {
			width: 200px;
			height: 200px;
			background-color: blue;
			margin-left: -200px;
		}
		.wrap {
			width: 100%;
		}

　　以上为双飞翼布局