flex布局撑开宽度

使用flex布局时，可以通过设置flex-shrink属性为0来阻止子元素被内容撑开。例如，在ul li的样式中设置flex-shrink: 0;可以实现这一效果。

如果想要实现左右布局，并且右边的盒子自适应宽度，可以设置左边盒子的定宽为200px，然后将右边盒子的宽度设置为0，并使用flex: 1;的样式来让宽度由flex布局来决定。这样，右边的盒子就会自动撑开，不会被内容撑开。

相关问题

css中flex布局如何撑开父盒子宽度

在CSS flex布局中，如果想让一个元素撑满父容器的宽度，你需要确保该元素作为flex项目，并设置其flex-grow属性。flex-grow属性用于分配可用空间，值默认为0，表示不自动增长。当项目的flex-shrink属性为非零（默认也是0），并且总空间大于项目的flex基础大小（即初始大小加上flex-basis）时，拥有更高flex-grow值的元素将优先占据空间。

例如：

.container {
  display: flex;
  /* 如果你想让某个子元素`item`充满父容器宽度 */
}

.item {
  flex: 1; /* 这里1代表flex-grow值，默认是0，表示不自动伸展 */
}

在这个例子中，`.container`设置了display:flex使其变为弹性盒模型，`.item`的flex-grow值为1意味着它会尽可能地占用剩余的空间来拉伸。如果你还需要保证其他条件不变，可以同时指定flex-shrink和flex-basis，比如：

.item {
  flex: 1 0 auto; /* flex-grow:1, flex-shrink:0 (默认), flex-basis:auto(默认)，这样只会在必要时拉伸，不会缩小 */
}

页面实现左中右布局，1. 左侧：宽度固定150px，高度自动撑开，和右侧同高 2. 中间：宽度自适应，高度自动撑开，和左侧同高 3. 右侧：宽度固定100px，高度自动撑开，和左侧同高，不用flex布局实现

可以使用传统的浮动布局来实现左中右布局。具体实现如下：

HTML代码：

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

CSS代码：

.container {
  overflow: hidden;
}
.left {
  float: left;
  width: 150px;
  height: 100%;
  background-color: #f0f0f0;
}
.content {
  margin-left: 150px;
  margin-right: 100px;
  height: 100%;
  background-color: #fff;
}
.right {
  float: right;
  width: 100px;
  height: 100%;
  background-color: #f0f0f0;
}

使用浮动布局时，需要注意以下几点：

1. 父容器要设置 `overflow: hidden;`，以防止子元素溢出；
2. 左侧和右侧元素要使用 `float: left;` 和 `float: right;` 进行浮动，同时需要设置固定宽度；
3. 中间元素要使用 `margin-left: 150px; margin-right: 100px;` 进行左右间距的设置，同时也要设置高度为100%。