页面布局--弹性布局

如何在页面中让两边的背景占三百像素，中间背景自适应，高度不限
1.首先搭建结构

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

2.格式化一下内外边距

* {
            padding: 0;
            margin: 0;
        }

3.一定要转换为Flex布局

.all {
            display: flex;
        }

4.书写剩下的样式

  .left {
            width: 300px;
            height: 100px;
            background: wheat;
        }

        .right {
            width: 300px;
            height: 100px;
            background: wheat;
        }

        .center {
            height: 100px;
            flex: 1;
            background: yellowgreen;
        }