.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，即平均分配剩余空间。

相关问题

<template> <div class="box"> <el-container> <el-header class="tou"> <myhead></myhead> </el-header> <el-container> <el-aside class="zuo"> <myleft></myleft> </el-aside> <el-container> <el-main class="you"> <router-view></router-view> </el-main> </el-container> </el-container> </el-container> </div> </template> <script scoped > import myhead from "../components/myhead.vue" import myleft from "../components/myleft.vue" export default { components: { myhead, myleft, } } </script> <style> .box { height: calc(100vh - 60px); width: 100vw; display: flex; min-width: 700px; overflow-y: hidden; } body { overflow-x: hidden; margin-left: 0px; margin-top: 0px; } .tou { height: 50px; background-color: rgb(0, 0, 0); } .zuo { width: 200px; height: 100%; overflow-y: scroll; } .you { flex: 9; height: 100%; background: #f9ffb9; position: fixed; width: 100%; float: left; margin-left: -100px; } </style> zuo的滚动条拉不动

抱歉，我的建议有误。你的代码中，`.zuo` 元素的高度已经被正确计算，可以出现滚动条。但是，你在 `.you` 元素中设置了 `position: fixed;` 样式，导致它脱离了普通文档流，覆盖在了 `.zuo` 元素上方，导致无法操作 `.zuo` 元素的滚动条。

你可以尝试把 `.you` 元素的 `position` 属性改为 `absolute`，并且在 `.qb` 元素上添加 `position: relative;` 样式，这样就可以让 `.you` 元素相对于 `.qb` 元素定位，不会遮盖 `.zuo` 元素了。

flex 布局练习题

flex布局是一种常用的网页布局方式，使用它可以很方便地实现各种灵活的布局效果。以下是一些flex布局的练习题案例：

1. 使用flex布局实现一个上下结构的容器，容器高度为100vw（视口宽度），背景颜色为skyblue。容器内有两个子元素，第一个子元素高度为父容器的一半，第二个子元素高度为父容器的一半。
CSS代码如下：

.container {
  height: 100vw;
  width: 100vw;
  background-color: skyblue;
  display: flex;
  flex-direction: column;
}

.item {
  flex: 1;
}

2. 使用flex布局实现一个三列布局，容器高度为100vh（视口高度），背景颜色为skyblue。容器内有三个子元素，头部、主体和底部，分别占据不同的高度比例。
CSS代码如下：

.container {
  height: 100vh;
  background-color: skyblue;
  display: flex;
  flex-direction: column;
}

.head {
  background-color: blue;
  flex-grow: 2;
}

.body {
  display: flex;
  flex-grow: 5;
}

.body-left {
  background-color: green;
  flex-grow: 1;
}

.body-center {
  background-color: pink;
  flex-grow: 5;
}

.footer {
  flex-grow: 1;
  background-color: orange;
}