CODEWITHSUNDEEP
csshtmlflexbox
Luca Verdecchia
Luca Verdecchia

Reputation: 29

Flexbox - Center two items that are on different row

I'm trying to learn Flexbox and I've encountered the first problem. Here's what I'm trying to accomplish: I've an header and I would like to have the logo on the first row at the center, then the burger menu always at the center but on the second row, so below the logo.

With my code the burger menu will place itself next to the logo on the same row.

Here's my code:

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

Upvotes: 1

Views: 60

Answers (1)

Nacorga
Nacorga

Reputation: 526

To align the elements vertically you must use flex-direction: column and flex-wrap: wrap is not necessary. Here is an example:

.wrapper{
  width: 100%;
  max-width: 1500px;
  position: relative;
  margin: auto;
}

.flex-container-header{
  display: flex;
  margin-top: 50px;
  flex-direction: column;
  align-items: center;
}
<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>

Upvotes: 2

Related Questions