css怎么两边伸长

CSS的flex布局可以非常方便地将容器中的项目进行排列，其中有一种很常见的排列方式就是两边伸长。比如我们可以让一个容器的左右两端都填满屏幕，中间的空间自适应变化，这样就可以实现很多有趣的效果了。

那么CSS的flex如何实现两边伸长呢？其实非常简单，我们只需要使用flex-grow属性即可。该属性表示项目在剩余空间中所占的比例，可以设定为一个非负数。比如如果我们将两个项目的flex-grow都设为1，那么它们将平等地分享容器中的剩余空间。

接下来我们使用一个示例来演示一下。首先我们需要一个HTML结构，包含一个容器和两个项目：

<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
</div>

然后我们为容器设置一些基本的样式：

.container {
  display: flex;
  justify-content: space-between;
  height: 100px;
  background-color: #f1f1f1;
  padding: 20px;
}

这里我们将容器的显示方式设为flex，使其成为一个伸缩容器。同时我们将justify-content设为space-between，这样左右两边的项目就会自动两端对齐。

接下来我们给两个项目设置一些样式：

.item1 {
  flex-grow: 1;
  background-color: #ff6347;
}

.item2 {
  flex-grow: 1;
  background-color: #4169e1;
}

这里我们将两个项目的flex-grow都设为1，这样它们就会平等地分享容器中的剩余空间。我们还给它们分别设置了不同的背景颜色，方便观察效果。

最后我们再加上一些动画效果：

.item1:hover {
  flex-basis: 80%;
  transition: flex-basis .5s ease-in-out;
}

.item2:hover {
  flex-basis: 20%;
  transition: flex-basis .5s ease-in-out;
}

这里我们为两个项目添加了:hover效果，当鼠标滑过时它们的宽度会有所变化。具体来说，当我们悬停在item1上时，它的宽度会变为容器的80%，而item2的宽度则变为容器的20%。我们还为它们添加了过渡效果，使动画更加流畅。

通过以上代码，我们就可以实现一个非常简单的两端伸长的效果。当然实际应用中，我们可能需要根据具体的需求进行更加细致的调整和优化。