【头条】CSS 如何实现左侧固定 300px，右侧自适应的布局

html

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
</div>

css

/* 样式部分 */
.container {
    height: 100px;
}

.left {
    background: gold;
}

.main {
    background: lightblue;
}

题解：

css

.container {
    display: flex;
}

.left {
    flex: 0 0 300px;
}

.main {
    flex: 1 1;
}

问题追问：

如果使用 flex 布局回答 flex: 1; 时，则追问它是哪几个属性的简写，最主要配置的是哪一个属性

使用 flex 布局，左侧 300px，右侧 flex-grow: 1;。

题解：

css

.container {
    display: flex;
}

.left {
    flex-basis: 300px;
    flex-shrink: 0;
}

.main {
    flex-grow: 1;
}

如果只使用 Grid 布局，则代码会更加简单，只需要控制容器的 css 属性

css

.container {
    display: grid;
    grid-template-columns: 300px 1fr;
}

【头条】CSS 如何实现左侧固定 300px，右侧自适应的布局 ​