Html Flexbox - 在同一行左右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30553602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox - Justify left and right on the same line
提问by Nick Pineda
Situation:
情况：
I have a simple nav bar that I'm building in Flexbox. I want to float one item to the left and keep the others pegged to the right.
我在 Flexbox 中构建了一个简单的导航栏。我想将一个项目向左浮动，并将其他项目固定在右侧。
Example:
例子：
<nav>
<ul class="primary-nav">
<li><a href="#" id="item1">ListItem1</a></li>
<li><a href="#" id="item2">ListItem2</a></li>
<li><a href="#" id="item3">ListItem3</a></li>
<li><a href="#" id="item4">ListItem4</a></li>
</ul>
</nav>
Problem
问题
Typically answers involve just floating items left and right but supposedly in Flexbox it is bad to use Floats. I was thinking about using justify-content and using flex-start and flex-end but that Isn't working out too well.
通常答案只涉及左右浮动的项目，但据说在 Flexbox 中使用浮动是不好的。我正在考虑使用 justify-content 并使用 flex-start 和 flex-end 但这并不太好。
I tried applying flex-start to the first item and then flex-end to the others but that didn't work so well.
我尝试将 flex-start 应用于第一个项目，然后将 flex-end 应用于其他项目，但效果不佳。
Like So:
像这样：
.primary-nav #item1 {
justify-content: flex-start;
}
.primary-nav #item2 {
justify-content: flex-end;
}
.primary-nav #item3 {
justify-content: flex-end;
}
.primary-nav #item4 {
justify-content: flex-end;
}
Praise and thanks to anyone who has Flexbox skills and can help show me the proper way to handle this situation. :)
赞美并感谢任何拥有 Flexbox 技能并能帮助我展示处理这种情况的正确方法的人。:)
回答by mmgross
If you're looking to have just one element on the left and all others on the right, the simplest solution is to use justify-content:flex-endon the parent element to move all elements to the right and then add margin-right:autoto the element you want to have on the left
如果您希望左侧只有一个元素而右侧有所有其他元素，最简单的解决方案是justify-content:flex-end在父元素上使用将所有元素向右移动，然后添加margin-right:auto到您希望在左侧拥有的元素
.primary-nav {
display:-webkit-flex;
display:flex;
list-style-type:none;
padding:0;
justify-content:flex-end;
}
.left {
margin-right:auto;
}<nav>
<ul class="primary-nav">
<li class="left"><a href="#">ListItem1</a></li>
<li class="right"><a href="#">ListItem2</a></li>
<li class="right"><a href="#">ListItem3</a></li>
<li class="right"><a href="#">ListItem4</a></li>
</ul>
</nav> 回答by leoap
There is no need for margin hacks or pseudo-elements.
不需要边距黑客或伪元素。
Simply create a division in your flex container and make the flex container justify by space between.
只需在您的 flex 容器中创建一个分区，并使 flex 容器之间的空间对齐。
Inside the first division you put the items that will be on left, and inside the second division you put the items that will be on right.
在第一个分区中，您将放置在左侧的项目，在第二个分区中，您将放置在右侧的项目。
nav.menu{
display: flex;
justify-content: space-between;
}
nav.menu ul{
margin: 0;
padding: 0;
list-style: none;
}
nav.menu ul li{
display: inline-block;
}<nav class="menu">
<ul class="menu-left">
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a></li>
</ul>
<ul class="menu-right">
<li><a href="#">MEMBERS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">PROFILE</a></li>
</ul>
</nav>回答by Oriol
You can insert a pseudo-element at the right place and make it grow to fill the available space.
您可以在正确的位置插入一个伪元素并使其增长以填充可用空间。
.primary-nav::after {
content: '';
flex-grow: 1;
order: 0;
}
.right {
order: 1;
}
.primary-nav {
display: flex;
list-style-type: none;
padding: 0;
}
.primary-nav::after {
content: '';
flex-grow: 1;
order: 0;
}
.right {
order: 1;
}
.left, .right {
border: 1px solid;
padding: 0 5px;
}<ul class="primary-nav">
<li class="left">Left 1</li>
<li class="right">Right 1</li>
<li class="right">Right 2</li>
<li class="right">Right 3</li>
</ul>
<ul class="primary-nav">
<li class="left">Left 1</li>
<li class="left">Left 2</li>
<li class="right">Right 1</li>
<li class="right">Right 2</li>
</ul>
<ul class="primary-nav">
<li class="left">Left 1</li>
<li class="left">Left 2</li>
<li class="left">Left 3</li>
<li class="right">Right 1</li>
</ul>
<ul class="primary-nav">
<li class="left">Left 1</li>
<li class="right">Right 1</li>
<li class="left">Left 2</li>
<li class="right">Right 2</li>
<li class="left">Left 3</li>
<li class="right">Right 3</li>
</ul>回答by ChrisJJ
Here's a more CSS-concise form of mmgross's solution:
这是 mmgross 解决方案的更简洁的 CSS 形式：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title></title>
<style type="text/css">
.container {
display:flex;
list-style-type:none;
padding:0;
}
.container > li:first-child {
margin-right:auto;
}
td { border:1px black solid } /* for debug */
</style>
</head>
<body>
<table>
<tr><td colspan=2>
<ul class="container">
<li>leftitem</li>
<li>rightitem</li>
</ul>
<tr><td>otherotherotherother<td>otherotherotherother
</table>
yielding:
产生：
Fiddle: https://jsfiddle.net/hbszf61x/. Ignore the red- this is due to a JSfiddle bug. The code is valid http://i.imgur.com/IVx6tET.png
小提琴：https: //jsfiddle.net/hbszf61x/。忽略红色- 这是由于JSfiddle 错误。代码有效http://i.imgur.com/IVx6tET.png
