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属性（其div在DOM中的form元素之前），因此提供 flex-grow 将占用之后的剩余空间表单元素具有所需的空间。

ul { flex-grow：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>

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

将搜索栏对齐到flex-container内部

2 个答案: