Question

情况：

我有一个简单的导航栏，我正在Flexbox中构建。我想将一个项目向左浮动，并将其他项目固定在右侧。

示例：

<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>

问题

通常答案只涉及左右浮动项目，但据推测，在Flexbox中使用Floats是不好的。我正在考虑使用justify-content并使用flex-start和flex-end但是效果不佳。

我尝试将flex-start应用于第一个项目，然后将flex-end应用于其他项目但是效果不佳。

喜欢如此：

.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;    
}

赞赏并感谢拥有Flexbox技能的任何人，并且可以帮助向我展示处理这种情况的正确方法。：）

Answer 1

如果您希望左侧只有一个元素而右侧的所有其他元素，最简单的解决方案是在父元素上使用justify-content:flex-end将所有元素移到右侧，然后添加{{ 1}}到左边想要的元素

margin-right:auto

.primary-nav {
    display:-webkit-flex;
    display:flex;
    list-style-type:none;
    padding:0;
    justify-content:flex-end;
}

.left {
    margin-right:auto;
}

Answer 2

不需要保证金黑客或伪元素。

只需在Flex容器中创建一个分区，然后通过空格使Flex容器对齐。

在第一个分区内，您将放置左侧的项目，在第二个分区内放置您将在右侧的项目。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

您可以在正确的位置插入一个伪元素，并使其增长以填充可用空间。

.primary-nav::after {
  content: '';
  flex-grow: 1;
  order: 0;
}
.right {
  order: 1;
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

这是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>

得到以下特性：

小提琴：https://jsfiddle.net/hbszf61x/。忽略the red - 这是由于a JSfiddle bug。代码有效http://i.imgur.com/IVx6tET.png

Flexbox - 在同一条线上向左和向右对齐

4 个答案: