使用 display: flex; 布局时，可以通过设置 justify-content: space-between; 属性将子元素两端对齐，同时使用 align-items: center; 属性将子元素在垂直方向上居中对齐。
以下是示例代码：
HTML代码
<div class="container"> <div>左侧内容</div> <div>右侧内容</div> </div>
CSS代码
.container {
display: flex;
justify-content: space-between;
align-items: center;
}上述代码中，我们创建了一个包含两个子元素的容器，并使用 display: flex; 将其设置为 Flex 布局。接着，使用 justify-content: space-between; 属性将子元素两端对齐，并使用 align-items: center; 属性将子元素在垂直方向上居中对齐。
在实际应用中，你可以将 .container 替换为需要设置布局的父元素，并将其中的子元素替换为具体的内容和样式。如果需要更精细的布局效果，还可以根据具体需求设置其他 Flex 属性，如 flex-direction、flex-wrap、align-content 等等。
需要注意的是，在使用 Flex 布局时，可能会出现一些兼容性问题，尤其是在较老的浏览器中。建议在编写代码时仔细查看相关文档并进行充分测试，以确保布局效果的稳定和兼容。
川公网安备 51010702002669号
18605917465
客服QQ