28172 sujets

CSS et mise en forme, CSS3

Bonjour
Je bataille avec Flexbox, je souhaiterai faire un header avec un logo à gauche et un texte à droite situé verticalement au milieu de la div Flex.
Malgré les nombreuses infos que j'ai pu lire, j'ai beaucoup de mal à comprendre comment placer les éléments.
Si vous pouviez me mettre sur le bon chemin, merci.
Bonne journée

https://www.menuiserie-menplast.fr/flex.html

<html lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menuiserie à Montpellier, Alu, PVC, Bois, devis gratuit |?Menplast</title>
    <style>
        header{margin:auto;background-color:aqua}
        #logo {background-color: rgb(62, 74, 236);width: 10%;}
        #texte {background-color: chartreuse;width: 30%;align-items:flex-end;margin:5rem 0 6rem 0;}
        @media only screen and (min-width:800px){
        header{width:1200px;display:flex;flex-direction: column;}
         }
      </style>
</head>
  <body> 
<header>
<div id="logo">
Logo
</div>
<div id="texte">
Texte ( Je souhaiterai le positionner à droite) 
</div>
</div>
</header>
  </body>
</html>
Bonjour africa,
Dans les propriétés de header remplace flex-direction:column par justify-content:space-between.
Meilleure solution
adrien881 a écrit :
Bonjour africa,
Dans les propriétés de header remplace flex-direction:column par justify-content:space-between.


Merci Adrien
Smiley smile