Выровняйте строку поиска справа внутри flex-контейнера

Question

Сценарий:

• Попытка создать панель навигации с помощью flex box,
• и я бы хотел, чтобы строка поиска была расположена вправо ,
  , но 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

Гибкий подход:

• Если вы хотите настроить с помощью flex properties, то space-between - это решение,
  
• @ Дэвид представил ответ по этому делу.

Подход с левого края:

• мы можем настроить поле в форме, содержащей поле поиска, так как это последний дочерний элемент.
  Таким образом, мы можем достичь желаемого результата,
  предоставляя margin-left: auto для формирования.

  nav> form { поле слева: авто; }

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>

Подход гибкого роста:

• мы можем настроить свойство flex-grow для ul (его div перед элементом формы в DOM), поэтому предоставление 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>

Надеюсь, это поможет.
Спасибо.

Answer 2

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