[分享]css分四列两端对齐

CSS分四列两端对齐是一种常见的布局方式。它可以让网页的版面更加整齐，美观，以及提升用户的浏览体验。本文将分享一份CSS样式代码，帮助您轻松实现这种布局方式。.wrapper { display: f...

CSS分四列两端对齐是一种常见的布局方式。它可以让网页的版面更加整齐，美观，以及提升用户的浏览体验。本文将分享一份CSS样式代码，帮助您轻松实现这种布局方式。

.wrapper {
  display: flex; /* 将容器设为弹性盒 */
  flex-wrap: wrap; /* 自动换行 */
  justify-content: space-between; /* 每一行两端对齐 */
}

.col {
  width: 23%; /* 定义每一列的宽度 */
  margin-bottom: 1em; /* 为每一列添加底部边距 */
} 

上述代码中，我们首先将容器的display属性设为flex，这样我们的容器就可以变成一个弹性盒子。通过设置flex-wrap属性为wrap，当子元素的宽度超过容器宽度时，子元素会自动换行。

使用justify-content属性设置为space-between，可以让每一行的两端对齐。最后，我们定义每一列的宽度和底部边距，即可完成四列两端对齐的布局。

通过以上CSS样式代码，我们可以很快地实现简单的四列两端对齐布局。需要注意的是，该布局方式对浏览器的兼容性存在差异，因此在开发过程中需要进行适当的测试和调整。