CSS面试20真题高频版-如何实现两栏布局右侧自适应？三栏布局中间自适应？

两栏布局右侧自适应

• 父元素BFC:overfllow:hidden，子元素固定宽度左浮动:float: left,右侧：margin-left:XXpx
• flex弹性布局:父元素display：flex;左侧元素固定宽度，右侧元素：flex:1;

(align-items属性用于定义弹性容器内子项在侧轴（通常是垂直方向）上的对齐方式。该属性可以接受以下值：

• ‌stretch‌：默认值，项目被拉伸以适应容器。
• ‌center‌：项目位于容器的中央。
• ‌flex-start‌：项目位于容器的开头。
• ‌flex-end‌：项目位于容器的结尾。
• ‌baseline‌：项目位于容器的基线上。
• ‌initial‌：将该属性设置为其默认值。
• ‌inherit‌：从父元素继承该属性。)

三栏布局中间自适应

• 父元素BFC:overfllow:hidden，两边float，中间margin-left和margin-right
• 父元素relative,两边absolute，中加margin-left和margin-right
• 两边float和负margin
• 父元素display:table，三个子元素：display: table-cell;
• 父元素display:flex;justify-content: space-between;,中间子元素width：100%或者flex:1
• grid父元素display: grid;width: 100%;grid-template-columns: 300px auto 300px

</style>
    // 两边float和负margin
    .left,
    .right,
    .main {
        height: 200px;
        line-height: 200px;
        text-align: center;
      }
    .main-wrapper {
        float: left;
        width: 100%;
      }
    .main {
        margin: 0 110px;
        background: black;
        color: white;
    }

    .left,
    .right {
        float: left;
        width: 100px;
        margin-left: -100%;
        background: green;
    }

    .right {
        margin-left: -100px; /* 自身宽度 */

    }
</style>

<div class="main-wrapper">
    <div class="main">中间自适应</div>
</div>
<div class="left">左侧固定宽度</div>
<div class="right">右侧固定宽度</div>