This question already has answers here:
Right or left align one flex item, while keeping the others centered
(10个答案)
4年前关闭。
我正在使用
还有我的
这是当前的样子:
我希望
我已经在该 flex 元素上尝试
jsFiddle
笔记:
Flex 由于flexbox对齐是通过在容器中分配可用空间来进行的,因此添加了一个不可见的flex元素以在两侧均等地创建平衡。 重要的是,幻像元素的宽度必须与最后一个元素(邮箱)的宽度完全相同。否则,将不会有相等的平衡,中间的物品也不会完美地居中。
在此处了解更多信息:Methods for Aligning Flex Items
(10个答案)
4年前关闭。
我正在使用
flexbox
创建一个导航栏。这是我的html
:<div class="container">
<div>Project</div>
<div>About the Project</div>
<div>Contact Us</div>
<div>Mailbox</div>
</div>
还有我的
css
:.container {
display: flex,
justify-content: center
}
这是当前的样子:
我希望
mailbox
div
在flex container
的末尾。我希望它看起来像这样。我已经在该 flex 元素上尝试
flex-end
无效。我需要怎么做才能做到这一点? 最佳答案
可以使用flex auto
边距和不可见的flex元素来实现布局。
.container {
display: flex;
}
.container > div:first-child {
margin-right: auto;
visibility: hidden;
}
.container > div:last-child {
margin-left: auto;
}
<div class="container">
<div>Mailbox</div><!-- invisible flex item -->
<div>Project</div>
<div>About the Project</div>
<div>Contact Us</div>
<div>Mailbox</div>
</div>
jsFiddle
笔记:
auto
margins用于对齐flex元素。 在此处了解更多信息:Methods for Aligning Flex Items
关于html - 将 flex 元素居中,并在行尾放置一个,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35250367/