Я пытаюсь изучить Flexbox и столкнулся с первой проблемой.Вот что я пытаюсь сделать: у меня есть заголовок, и я хотел бы, чтобы логотип располагался в первом ряду в центре, а затем меню бургера всегда в центре, но во втором ряду, поэтому под логотипом.
С моим кодом меню бургера будет располагаться рядом с логотипом в том же ряду.
Вот мой код:
@charset "UTF-8";
body{
margin:0;
padding:0;
}
.wrapper{
width: 100%;
max-width: 1500px;
position: relative;
margin: auto;
}
.flex-container-header{
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px;
}
#flex-logo{
width: 30%;
height: 30%;
}
<!doctype html>
<html>
<head>
<meta author="Example">
<meta charset="UTF-8">
<title>Example</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="wrapper">
<div id="header">
<nav>
<div class="flex-container-header">
<img src="img/logo.png" id="flex-logo" alt="Logo">
<img src="img/burger-menu.png" id="burger-menu" alt="Burger Menu">
</div>
</nav>
</div>
</div>
</body>
</html>