[分享]css3宽度往两边延伸

CSS3是前端开发中常用的样式语言，其中宽度往两边延伸是其中一个比较常见的特性。

//代码示例
.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.item {
  width: calc((100% - 60px) / 3);
} 

这里我们使用flex布局，首先将容器设置宽度为80%，然后使用justify-content属性将3个元素分别往两端对齐，并且使用calc函数计算元素宽度（60px表示两个元素的间隔）。这样可以让宽度往两边延伸，使页面布局更加美观，符合现代化的设计思路。

除了上面的方法之外，我们还可以使用float来实现宽度往两边延伸，具体操作如下：

//代码示例
.container2 {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

.item2 {
  width: calc((100% - 60px) / 3);
  float: left;
  margin-right: 20px;
}

.item2:last-child {
  margin-right: 0;
} 

使用float属性将元素左浮动，并设置margin-right实现元素间的间隔，最后将最后一个元素的margin-right设置为0，确保布局效果正确。

总之，宽度往两边延伸是一种非常实用的CSS3特性，适用于很多不同的场景。在实际开发中，我们可以根据自己的需求选择不同的方法实现宽度往两边延伸。