Адаптивная навигационная панель Flexbox - justify-content: flex-end не работает - PullRequest
Новая
       14

Адаптивная навигационная панель Flexbox - justify-content: flex-end не работает

0 голосов
/ 12 сентября 2018

Я изучаю Flex-box сейчас.Я пытаюсь сделать панель навигации, используя flex box, но есть проблема.Я хочу, чтобы мой nav-bar-flex класс перешел на правую сторону, поэтому я использовал justify-content: flex-end для своего класса, но он не работает.Я хочу, чтобы только nav-bar-flex класс шел с правой стороны, а не бренд-класс.Вот мой код: 

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Ariel, Helvetica, sans-serif;
}
.header {
	background: gray;
	border-radius: 0.5em;
}
/*
.main-container {
	width: 90%;
	margin: auto;
	overflow: hidden;
}
*/
.main-head {
	display: flex;
	justify-content: flex-start;
}

.link {
	text-decoration: none;
	text-transform: uppercase;
	color: white;
	text-align: center;
	display: block;
	padding: 1em;
	width: 8em;
}
.nav-bar-flex{
	display: flex;
	justify-content: flex-end;
}
.brand-name {
	width: 15em;
	background: black;
	border-radius: 0.5em;
}
.link:hover{
	background: black;
	border-radius: 0.5em;
}
<header class="header">
			<div class="main-container main-head">
			<div class="brand">
				<a class="brand-name link" href="index.html">Saurabh <span class="highlite">Vishwakarma</span></a>
			</div>
			<div class="nav-bar">
				<nav class="nav-bar-flex">
					<a class="link" href="index.html">Home</a>
					<a class="link" href="services.html">Services</a>
					<a class="link" href="contact.html">Contact</a>
					<a class="link" href="about.html">About</a>	
				</nav>
			</div>
			</div>
		</header>

1 Ответ

0 голосов
/ 12 сентября 2018

Добавьте margin-left: auto к nav-bar элементу к потяните навигацию вправо - см. Демонстрацию ниже: 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Ariel, Helvetica, sans-serif;
}

.header {
  background: gray;
  border-radius: 0.5em;
}


/*
.main-container {
	width: 90%;
	margin: auto;
	overflow: hidden;
}
*/

.main-head {
  display: flex;
  justify-content: flex-start;
}

.link {
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  text-align: center;
  display: block;
  padding: 1em;
  width: 8em;
}

.nav-bar-flex {
  display: flex;
  justify-content: flex-end;
}

.brand-name {
  width: 15em;
  background: black;
  border-radius: 0.5em;
}

.link:hover {
  background: black;
  border-radius: 0.5em;
}

.nav-bar {
  margin-left: auto;
}
<header class="header">
  <div class="main-container main-head">
    <div class="brand">
      <a class="brand-name link" href="index.html">Saurabh <span class="highlite">Vishwakarma</span></a>
    </div>
    <div class="nav-bar">
      <nav class="nav-bar-flex">
        <a class="link" href="index.html">Home</a>
        <a class="link" href="services.html">Services</a>
        <a class="link" href="contact.html">Contact</a>
        <a class="link" href="about.html">About</a>
      </nav>
    </div>
  </div>
</header>
...