flex配合margin实现元素均匀分布

在Flex布局中，要使用margin实现元素均匀分布，可以设置容器内元素的margin值相同，并且设置容器的justify-content属性为space-between。这样，第一个元素会紧贴容器边缘，最后一个元素会被紧贴容器边缘，其余元素均匀分布在这两个元素之间。

以下是实现元素均匀分布的CSS代码示例：

.container {

  display: flex;

  justify-content: space-between;

}

.item {

  margin: 0 5px; /* 水平方向上的间距 */

}

HTML结构：

<div class="container">

  <div class="item">Item 1</div>

  <div class="item">Item 2</div>

  <div class="item">Item 3</div>

</div>

在这个例子中，.container是一个Flex容器，.item是容器内的子元素。子元素.item使用了水平方向的margin，容器.container使用了justify-content: space-between;，使得所有.item均匀分布在容器的两端。