（自用面试题）三栏布局，中间自适应如何实现？

考频：
高频。

定义：
三栏布局实现效果就是按照左中右的顺序进行排列，通常中间列最宽，左右两列次之。

1. flex布局
   容器display设置为flex，左右子元素设置为固定宽度，中间子元素flex设置为1。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .container {
        display: flex;
    }

    .item {
        height: 100px;
    }

    .left-item {
        width: 100px;
        background-color: red;
    }

    .right-item {
        width: 100px;
        background-color: yellow;
    }

    .content {
        flex: 1;
        background-color: green;
    }
</style>

<div class="container">
    <!-- 放在最上面，加载的时候会被最先加载，有利于网页的优化 -->
    <div class="content item">content</div>
    <div class="left-item item">left-item</div>
    <div class="right-item item">right-item</div>
</div>

2. grid布局
   容器display设置为grid，grid-template-columns设置为固定宽度 auto 固定宽度。

<style>
     * {
        margin: 0;
        padding: 0;
    }
    
    .container {
        display: grid;
        grid-template-columns: 100px auto 100px;
    }

    .item {
        height: 100px;
    }

    .left-item {
        background-color: red;
    }

    .right-item {
        background-color: yellow;
    }

    .content {
        background-color: green;
    }
</style>

<div class="container">
    <div class="content item">content</div>
    <div class="left-item item">left-item</div>
    <div class="right-item item">right-item</div>
</div>