gpt4 book ai didi

html - 如何使用 Flexbox 居中对齐一个 flex 元素并右对齐另一个 flex 元素

转载 作者:技术小花猫 更新时间:2023-10-29 11:37:41 24 4
gpt4 key购买 nike

<分区>

我是 Flexbox 的新手,想对齐按钮,但我不知道如何仅使用 Flexbox 来处理同一行上居中对齐按钮和右对齐按钮的常见情况。

但是,我找到了一种方法,它使用与右对齐元素长度相同的不可见左对齐元素和 flex justify-content with space-between 使中间元素在行中居中。

Flexbox 有更直接的方法吗?

.flexcontainer {
display: flex;
justify-content: space-between;
width: 500px;
height: 200px;
}

.iteminvisible {
flex: 0 1 auto;
width: 100px;
height: 100px;
visibility: hidden;
}

.itemcenter {
flex: 0 1 auto;
width: 150px;
height: 100px;
}

.itemright {
flex: 0 1 auto;
width: 100px;
height: 100px;
}
<div class="flexcontainer">
<div class="iteminvisible">Other</div>
<div class="itemcenter">One</div>
<div class="itemright">Other</div>
</div>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com