display: flex分配宽度

要按比例分配宽度，你可以使用 flex 属性来设置弹性项目的占比。在 flex 值后面添加一个数字，该数字表示相对于其他弹性项目的比例。

例如，如果你有三个弹性项目，你可以使用如下代码按照 1:2:1 的比例分配宽度：

.container {
  display: flex;
}

.item {
  flex: 1; /* 默认为 1，表示按照相等的比例分配宽度 */
}

.item:nth-child(2) {
  flex: 2; /* 这个项目将会占据其他项目的两倍宽度 */
}

在上面的例子中，容器使用 `display: flex;` 属性

相关问题

display: flex固定宽度

`display: flex` 是 CSS 中的一种布局模式，它主要用于创建响应式、灵活的网格布局。当应用于某个容器元素（比如 `div`）时，会使其内的子元素在水平方向上成为弹性布局，可以自动调整空间分配。

- **基本语法**：将 `display` 属性设置为 `flex` 或者 `inline-flex`。

.container {
  display: flex;
}

- **主要特点**：
- **主轴对齐**：通过 `align-items` 控制垂直方向的对齐，如 `center`, `flex-start`, `flex-end` 等。
- **交叉轴对齐**：通过 `justify-content` 控制水平方向的对齐，如 `start`, `center`, `end`, `space-between` 等。
- **自适应宽度**：如果你设置了固定宽度，`flex-shrink` 和 `flex-grow` 可以控制元素在剩余空间的收缩和扩张。
- **单行或多行布局**：默认下，`flex-wrap: wrap` 让元素换行，如果不需要换行则设为 `nowrap`。

.container{width:100vw;height:100vh;display:flex;.left{flex:1;display:flex}}这儿的flex:1是啥

在CSS中，flex是一种弹性布局的属性，用于控制元素在容器中的伸缩比例。flex:1是flex属性的一个取值，表示元素在容器中占据可用空间的比例为1，即将剩余空间平均分配给所有具有flex属性的元素。

具体来说，当容器的宽度或高度有剩余空间时，flex:1的元素会根据自身的flex-grow属性值来分配剩余空间。如果所有具有flex属性的元素的flex-grow值都为1，则它们会平均分配剩余空间；如果其中一个元素的flex-grow值为2，而其他元素的flex-grow值为1，则前者会获得更多的剩余空间。

总结一下，flex:1表示元素在容器中占据可用空间的比例为1，即平均分配剩余空间。