Flexbox:justify-content

bonjour,je suis en train de faire le projet hors plateforme Fotomatic et je pense que j’un un gros problème pour utilisé flexbox et surtout la justify-content qui ne fonctionne jamais quoi que je fasse.
Il y a forcement une chose que je fais mal mais même en passant des heures et en revoyant le chapitre de flexbox , rien à faire je ne trouve pas la solution ( je commence à deprimé!).
Je n’arrive pas à placer mon element sur la droite à l’aide de justify-content: flex end.
Rien ne se passe ou si je le place dans le container principale tout se place à droite alors que je dois garder le <a fotomatic sur la gauche. Voici le code.

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700" rel="stylesheet">
  <link rel="stylesheet" href="./resources/css/reset.css">
  <meta charset="UTF-8">
</head>
<body>
  <!-- Header -->
  <header>
    <div class="content">
      <a href="index.html" class="desktoplogo">Fotomatic</a>
      <nav class="desktop">
        <ul>
          <li><a href="#">Product detail</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="https://www.instagram.com/">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
        </ul>
      </nav>
      <nav class="mobile">
        <ul>
          <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
          <li><a href="#" class="button">Join us</a></li>
        </ul>
      </nav>
    </div>
  </header>
header .content{
  height: 85px;
  width: 100%;
  background-color: rgb(241, 8, 8);
  margin: none;
  position: fixed;
  display: flex;
  align-items: center;
}

.desktoplogo{
  margin-left: 30px;
  color: #4A4A4A;
  font-size: 24px;
  font-family: Roboto-Mono-Regular;
  float: left;
}

.desktop ul{
  display: inline-flex;
  justify-content: flex-end;
}
nav a{
  color: #4A4A4A;
  font-size: 16px;
  font-family: Roboto-Regular;
  line-height: 1.6;
  margin-right: 30px;
  
}
.desktop img{
  width: 16px;
  height: 16px;
}

merci à vous

bon j’ai trouvé la solution mais je ne compre pas !
j’ai rajouter à .desktoplogo: un flex: 1; et tout se place correctement, mais je ne comprend pas pourquoi en mettant cela “fotomatic” se place correctement sur la gauche

Bonjour,

Je ne parle pas français. Je m’excuse donc pour toute mauvaise traduction, Il peut être plus facile pour vous de recevoir de l’aide dans la balise internationale Codecademy:

image

Mais je ne veux pas qu’une barrière linguistique vous empêche d’obtenir de l’aide. Avec votre code, vous devriez pouvoir utiliser “display: flex” puis “justify-content: space-between”. Lors de la modification de votre code, je l’ai fait ressembler à ceci.

.content{
  height: 85px;
  width: 100%;
  background-color: rgb(241, 8, 8);
  margin: none;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul {
  display: flex;
}

thankkkkkkkk youuu
this is the first time I publish so not yet super comfortable with the tools (thanks for the tip) a big thank you also for taking the trouble to answer me and for unblocking me :slight_smile:

1 Like

You’re welcome!

Did you get your header working without all the extra work around?

yes, every things it’s ok now

1 Like