Не получается использовать flex-start/flex end

139

27 июля 2019, 22:00

Мне нужно чтобы к левому краю прижался логотип, а список с ссылками к правому краю.
Как это сделать используя флекс?
Что я упустил?

Html/css код:

/* --------------- reset.css --------------- */ 
html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i,  dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { 
	margin: 0; 
	padding: 0; 
	border: 0; 
	outline: 0;                               /* обнуляем отступы и убираем бордюры */ 
	vertical-align: baseline;          /* приводим все к одной базовой линии */ 
	background: transparent;      /* чтобы не проскакивали левые фоны, установленные по умолчанию */ 
	font-size: 100%;                     /* размер шрифта всем одинаковый */ 
} 
a {                                      	     /* ссылка не в общем списке чтобы не сбрасывать outline по умолчанию */ 
	margin:0; 
	padding:0; 
	font-size:100%; 
	vertical-align:baseline; 
	background:transparent; 
	outline:none; 
} 
table {						/* устраняем отступы между ячейками таблицы */ 
	border-collapse: collapse;  
	border-spacing: 0; 
} 
td, td img { 
	vertical-align: top;			/* возвращаем привычное вертикальное выравнивание */ 
}  
input, select, button, textarea { 
	margin: 0; 				/* убираем отступы по умолчанию для элементов форм (в частности для checkbox и radio) */ 
	font-size: 100%; 			/* делаем размер шрифтов везде одинаковым */ 
	outline: none; 
} 
input[type="text"], input[type="password"], textarea { 
	padding: 0; 				/* убираем внутренние отступы для текстовых полей */ 
} 
input[type="checkbox"] { 		/* вертикальное выравнивание чекбоксов и радиобатонов относительно меток */ 
	vertical-align: bottom; 
} 
input[type="radio"] { 
	vertical-align: text-bottom; 
} 
sub { 
	vertical-align: sub; 
	font-size: smaller; 
} 
sup { 
	vertical-align: super; 
	font-size: smaller; 
} 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
	display:block; 
} 
nav ul { 
	 list-style:none; 
} 
/* --------------- /reset.css --------------- */ 
 
/* --------------- базовые настройки ---------*/ 
html { 
	min-height:100%; /* всегда показываем вертикальную полосу прокрутки  */ 
} 
body { 
	color: #606060; 
	text-align: left; 
	font-size: 1em; /* используем безопасные шрифтовые CSS стеки */ 
	min-height:100%; 
	font-family: 'Open Sans', sans-serif; 
} 
a, a:visited { /* порядок правил для ссылок имеет значение */ 
	color: #58c93a; 
	text-decoration:none; 
} 
a:hover { 
	color: #fdf208; 
	text-decoration:none; 
} 
a:focus, a:active { 
	color: #c83867; 
	text-decoration:none; 
} 
h1, h2, h3, h4, h5, h6{ 
	font-weight:normal; 
} 
img{ 
 
	max-width:100%; 
} 
.clr{ 
	clear:both; 
} 
.clearfix:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 
/* --------------- /базовые настройки ---------*/ 
 
header{ 
	background: #292929; 
	 
} 
 
.center-block-main{ 
	margin:0 auto; 
	max-width: 990px; 
	display:flex; 
} 
.logo{ 
	justify-content:flex-start; 
} 
.main-menu{ 
	justify-content:flex-end; 
} 
.main-menu li{ 
	font-weight: 600; 
} 
.main-menu a{ 
	color: #fff; 
}

<!DOCTYPE html> 
<html> 
<head> 
 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">  
<title>Company Name - Home Page</title> 
</head> 
<body> 
<header> 
		<div class="center-block-main"> 
			<a href="index.html"><img src="img/logo.jpg" alt="Company Logo" class="logo"></a> 
			<nav class="main-menu"> 
				<ul> 
					<li><a href="">Journal</a></li> 
					<li><a href="">About</a></li> 
					<li><a href="">Work</a></li> 
					<li><a href="">Content</a></li> 
				</ul> 
			</nav> 
		</div> 
	</header> 
 
 
</body> 
</html>

Answer 1

Лишние стили я убрал так как их надо хранить в отдельном файле и подключать отдельно а всё остальное делается так :

flex : применяется для родителя и после align-items:center, у вас это center-block-main и потом уже для ul и всё

.center-block-main { 
  margin: 0 auto; 
  max-width: 990px; 
  display: flex; 
  align-items: center; 
  justify-content: flex-start; 
} 
 
ul { 
  display: flex; 
} 
 
.main-menu li { 
  font-weight: 600; 
  list-style: none; 
} 
 
ul li:not(:last-child) { 
  margin-right: 20px; 
} 
 
.main-menu a { 
  text-decoration: none; 
}

<div class="center-block-main"> 
  <a href="index.html"><img src="http://placehold.it/100" alt="Company Logo" class="logo"></a> 
  <nav class="main-menu"> 
    <ul> 
      <li><a href="">Journal</a></li> 
      <li><a href="">About</a></li> 
      <li><a href="">Work</a></li> 
      <li><a href="">Content</a></li> 
    </ul> 
  </nav> 
</div>