将搜索栏与 flex-container 内的右侧对齐

Question

场景：

• 尝试使用弹性框创建导航栏，
• 我希望搜索栏位于右侧，但
  justify-self 不起作用？？

我是新手，这太令人沮丧了 没有得到应该如此简单的东西，请有人告诉我 我哪里错了！

/* Navigation Bar */

nav {
	display: flex;
	background: var(--navbar);
	width: 100%;
	position: fixed;
	padding: 10px 0;
}

.nav-list > li {
	display: inline;
	padding: 0px 25px;
}

.nav-list > li > a {
	text-decoration: none;
	color: var(--navlink)
}

.nav-list > li > a:hover {
	color: var(--navhover)
}

.search-bar {
	display: flex;
	justify-content: flex-end;
	margin: 12px;
	padding: 8px;
	width: 200px;
	font-size: 14px;
	border-radius: 10px;
	border: none;

<nav>
  <ul class="nav-list">
	  <li><a href="#" class="nav-link">Log In</a></li>
		<li><a href="#" class="nav-links">Sign Up</a></li>
		<li><a href="#" class="nav-links">Openings</a></li>
  </ul>
	<form action="/search" method="get">
    <input type="search" name="search" placeholder="Search" class="search-bar">
	</form>
</nav>

Answer 1

在 CSS 中将 justify-content: space-between; 规则添加到 nav 元素。

nav {
	display: flex;
	background: var(--navbar);
	width: 100%;
	position: fixed;
	padding: 10px 0;
        justify-content: space-between;
}

.nav-list > li {
	display: inline;
	padding: 0px 25px;
}

.nav-list > li > a {
	text-decoration: none;
	color: var(--navlink)
}

.nav-list > li > a:hover {
	color: var(--navhover)
}

.search-bar {
	display: flex;
	justify-content: flex-end;
	margin: 12px;
	padding: 8px;
	width: 200px;
	font-size: 14px;
	border-radius: 10px;
	border: none;
  }

<nav>
  <ul class="nav-list">
    <li><a href="#" class="nav-link">Log In</a></li>
    <li><a href="#" class="nav-links">Sign Up</a></li>
    <li><a href="#" class="nav-links">Openings</a></li>
  </ul>
  <form action="/search" method="get">
    <input type="search" name="search" placeholder="Search" class="search-bar">
  </form>
</nav>

Answer 2

弹性方法：

• 如果您想使用flex properties 进行调整，那么space-between 就是解决方案，
  
• @David 已为此案例提交了答案。

左边距方法：

• 我们可以调整包含搜索字段的表单的边距，因为它是最后一个孩子。
  所以，我们可以通过
  提供margin-left: auto的形式来达到预期的效果。

  导航>表格{ 左边距：自动； }

nav {
	display: flex;
	background: var(--navbar);
	width: 100%;
	position: fixed;
	padding: 10px 0;
}

nav > form {
    margin-left: auto;
}

.nav-list > li {
	display: inline;
	padding: 0px 25px;
}

.nav-list > li > a {
	text-decoration: none;
	color: var(--navlink)
}

.nav-list > li > a:hover {
	color: var(--navhover)
}

.search-bar {
	display: flex;
	justify-content: flex-end;
	margin: 12px;
	padding: 8px;
	width: 200px;
	font-size: 14px;
	border-radius: 10px;
	border: none;
  }
  

<nav>
  <ul class="nav-list">
	  <li><a href="#" class="nav-link">Log In</a></li>
		<li><a href="#" class="nav-links">Sign Up</a></li>
		<li><a href="#" class="nav-links">Openings</a></li>
  </ul>
	<form action="/search" method="get">
    <input type="search" name="search" placeholder="Search" class="search-bar">
	</form>
</nav>

弹性增长法：

• 我们可以调整 ul 上的flex-grow 属性（它在 DOM 中表单元素之前的 div），因此提供 flex-grow 将占用表单元素占用空间后留下的空间需要。

  ul { 弹性增长：1； }

nav {
	display: flex;
	background: var(--navbar);
	width: 100%;
	position: fixed;
	padding: 10px 0;
}

ul {
 flex-grow: 1;
}

.nav-list > li {
	display: inline;
	padding: 0px 25px;
}

.nav-list > li > a {
	text-decoration: none;
	color: var(--navlink)
}

.nav-list > li > a:hover {
	color: var(--navhover)
}

.search-bar {
	display: flex;
	justify-content: flex-end;
	margin: 12px;
	padding: 8px;
	width: 200px;
	font-size: 14px;
	border-radius: 10px;
	border: none;
  }

<nav>
  <ul class="nav-list">
	  <li><a href="#" class="nav-link">Log In</a></li>
		<li><a href="#" class="nav-links">Sign Up</a></li>
		<li><a href="#" class="nav-links">Openings</a></li>
  </ul>
	<form action="/search" method="get">
    <input type="search" name="search" placeholder="Search" class="search-bar">
	</form>
</nav>

希望，它会有所帮助。
谢谢。