28172 sujets

CSS et mise en forme, CSS3

[Résolu] Nav et flexbox

upload/1598217659-78421-css.png Bonsoir,


J'ai un conteneur dans lequel se trouve une div logo et un menu nav.
Je souhaite les mettre cote a cote donc j'applique la propriété display : flex sur le conteneur.
Le problème étant que lorsque je fais ça le menu nav ne prend plus le restant de la page.
Comment faire en sorte qu'il le prenne ? 


body{
  margin: 0;
}

.container{
  display: flex;
}

header{
  text-align: center;
  padding: 2rem 0;
  background: pink;
}


nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
  background: grey;
  padding: 0;
}

nav li{
  margin: 0 1rem;
}

nav a{
  text-decoration: none;
}

Modifié par ripeace_ (23 Aug 2020 - 23:21)
Modérateur
Salut,

Tu peux nous donner ton HTML aussi ? J'ai du mal a voir comme ca s'imbrique vu qu'il y a un container en plus du header..

Sinon il faut mettre flex: 1 1; sur l'enfant flex qui doit prendre toute la place restante.


<body>
  <header>

    <div class="container">

		<div class="logo">
			<p>LOGO </p>
		</div>


		
			<nav>
				<ul>
					<li><a href="">HOME</a></li>
					<li><a href="">WEAPONS</a></li>
					<li><a href="">FAUNA</a></li>
					<li><a href="">CHARACTERS</a></li>
				</ul>
			</nav>
		

	</div>




  </header>
</body>
Modérateur
Alors du coup, en l'état, avoir un container est inutile : Ton header fait déjà le taff.

<header>
	<div class="logo">
		<p>LOGO </p>
	</div>
	<nav>
		<ul>
			<li><a href="">HOME</a></li>
			<li><a href="">WEAPONS</a></li>
			<li><a href="">FAUNA</a></li>
			<li><a href="">CHARACTERS</a></li>
		</ul>
	</nav>
</header>


Ensuite pour fait ce que tu cherche a faire il faut le faire en 2 fois : 1 flex sur le header et 1 flex sur le ul

header{
  display: flex;
}
  nav {
    flex: 1 1;
  }
    nav ul{
      display: flex;
    }
      nav li{
        flex: 1 1;
      }


https://jsfiddle.net/undless/jyegs3xd/

Bonne journée
Meilleure solution
Ducoup c'est plus ou moins ce que j'ai fais dans le raisonnement. Une fois sur container (bien qu'inutile) puis une fois sur nav ul.
Merci pour la solution !


Par contre je ne comprends toujours pas le comportement du nav, c'est un élément bloc alors pourquoi ne prend-il pas tout l'espace restant automatiquement ? (sans ajouter les flex 1 1)
Modifié par ripeace_ (24 Aug 2020 - 10:31)
Modérateur
ripeace_ a écrit :
Par contre je ne comprends toujours pas le comportement du nav, c'est un élément bloc alors pourquoi ne prend-il pas tout l'espace restant automatiquement ? (sans ajouter les flex 1 1)

Par défaut la valeur de flex-growth est à 0 du coup il ne prend pas toute la place si on ne lui dit pas (le display block n'intervient pas dans ce contexte de flex).
Modifié par _laurent (24 Aug 2020 - 10:42)
Sujet clos
Aller à