Flexbox вёрстка. Margin

229

19 декабря 2017, 16:34

1) Пытаюсь сверстать navbar на flexbox, на float-ах было бы проще сделать то, что я хочу, но стараюсь всё делать именно на flexbox. Так вот, вопрос: можно ли как-то переместить отдельный элемент в правый угол его контейнера? Но сделать это на flexbox и при этом дополнительно его ни во что не оборачивать. Здесь мне нужно элемент "item" переместить вправо, в конец. И да, почему над "HOME" есть чёрные отступы, он должен быть на полную высоту. 2) Думал отодвинуть его на margin-left, но было бы правильно это делать, или если это сделать, и задать конкретное кол-во пикселей, то у разных мониторов будет выглядеть по-разному? И какими единицами измерения лучше пользоваться? Читал, что "px" лучше не надо.

.header, .topnav { 
	width: 100%; 
	background-color: black; 
	display: flex; 
	align-items: center; 
} 
 
.topnav a:hover { 
  	background-color: #ddd; 
  	color: black; 
} 
 
.topnav a { 
	font-size: 20px; 
	color: white; 
	padding: 10px; 
} 
 
#active { 
	background-color: green; 
} 
 
.icon { 
	display: none; 
}

<header class="header"> 
		<div class="topnav"> 
			<a href="#" class="hrefs" id="active">Home</a> 
			<a href="#" class="hrefs">News</a> 
			<a href="#" class="hrefs">Contacts</a> 
			<a href="#" class="hrefs">About</a> 
			<b><a href="javascript:void(0);" class="icon" onclick="openCity()">&#9776;</a></b> 
		</div> 
	</header>

Answer 1

Можете задать свойство flex-grow для контейнера, обрамляющего последний элемент списка, и выровнять текст по правому краю.

.topnav { 
  background-color: black; 
  display: flex; 
  padding-left: 0px; 
  list-style: none; 
} 
li { 
  color: white; 
  padding: 10px; 
} 
li a { 
  color: white; 
} 
.active { 
  background-color: #5DB97D; 
} 
.menuBurger { 
  flex-grow: 1; 
  text-align: right; 
}

<ul class="topnav"> 
  <li class="active"><a href="#">Home</a></li> 
  <li><a href="#">News</a></li> 
  <li><a href="#">Contacts</a></li> 
  <li><a href="#">About</a></li> 
  <li class="menuBurger"><a href="#">menu</a></li> 
</ul>

Answer 2

.header, .topnav { 
  width: 100%; 
  background-color: black; 
  display: flex; 
  align-items: center; 
} 
 
.topnav a:hover { 
  background-color: #ddd; 
  color: black; 
} 
 
.topnav a { 
  font-size: 20px; 
  color: white; 
  padding: 10px; 
} 
 
#active { 
  background-color: green; 
} 
 
.topnav a:last-child { 
  order: 2; 
} 
 
.topnav:before { 
  content: ""; 
  flex: 1 0 0px; 
  order: 1; 
}

<header class="header"> 
  <div class="topnav"> 
    <a href="#" class="hrefs" id="active">Home</a> 
    <a href="#" class="hrefs">News</a> 
    <a href="#" class="hrefs">Contacts</a> 
    <a href="#" class="hrefs">About</a> 
  </div> 
</header>

Answer 3

Да, маржином слева как раз можно, просто напишите margin-left: auto; Насчет полоски у меню - у Вас все items находятся по центру, и высота блока НОМЕ не растягивается, а такая, как есть, либо напишите align-self: stretch; либо добавьте паддингов, или с высотой поиграйтесь.