flex布局：元素两侧对齐
warning:
这篇文章距离上次修改已过190天，其中的内容可能已经有所变动。
在Flex布局中，要使得元素两侧对齐，可以使用justify-content: space-between;属性。这会使得容器内的子元素分布在容器的两端，并且两端的子元素分别贴边，同时保持子元素之间的距离相等。
下面是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-item {
width: 50px; /* 可以根据需要调整宽度 */
height: 50px; /* 可以根据需要调整高度 */
background-color: #f1f1f1;
margin: 10px; /* 可以根据需要调整外边距 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body>
</html>在这个例子中，.flex-container是一个Flex容器，其中包含三个.flex-item元素。通过设置justify-content: space-between;，这三个项就会分布在容器的两侧，并且保持相等的距离。
评论已关闭