Flexbox tutorial https://www.youtube.com/watch?v=-Wlt8NRtOpo&t=2394s

1

Hi I’ve been trying to find an error because I would like to wrap container but it doesn’t work
Can somebody help me with this problem

(about 40 min)

<!DOCTYPE html>
<html>
<head>
	<title>My webpage</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap&subset=latin-ext" rel="stylesheet">
</head>
<body>


 
  	<nav id="wrapper">
   <ul class="container">
   
       <li>Home</li>
       <li>About</li>
       <li class="search">
       <input style="text"placeholder="Search" class="search-input">
       </li>
       <li>Rules</li>
   </ul>
</nav>
 
 
 	
 

  
   

</body>
</html>

html,body
{
height:100%;
}
.container
{
display:flex;
background-color:#102ac3;

}
.container li
{
padding:10px;
list-style:none;

}

.search
{
flex:1;
}

.search-input
{
width:100%;
}
@media all and (max-width: 600px) {
  .container{
    flex-wrap:wrap;
    
  }
}
2

If you set .container { display:flex; } what happens?

1 Like
3

I would suggest doing the original course on Scrimba. It has all the code and is interactive. Here is the video/code for Bonus: Responsive Navbar - Flexbox tutorial

This is the final code:

.container {
  border: 5px solid #ffcc5c;
  display: flex;
}

.search {
  flex: 1;
}

@media all and (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  }
  .container > li {
    flex: 1 1 50%;
  }
  
  .search > input {
    text-align: center;
  }
}

@media all and (max-width: 400px) {
  .container > li {
    flex: 1 1 100%;
  }
  .search {
    order: 1;
  }
}
1 Like