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均匀分布在容器的两端。

猜你喜欢

转载自blog.csdn.net/Rverdoser/article/details/143024625