Positionnement des blocs avec FlexBox par PouleUp - page 1

Bonjour à tous. Je débute et je suis sur le cours sur les flexbox. J'ai du mal à comprendre la logique. J'essaye, pour m'entraîner de réaliser la page google avec les flex box, mais je suis confronté aux problèmes de disposition des blocs.

1- Ma div "barre de recherche (et son image) ne se centre pas

2- Je n'arrive pas à caler mon footer sur le bas de la page

Pouvez-vous me donner un coup de main?

Thx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script
    src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <link rel="stylesheet" href="calibre.css"/>
      <script src="https://kit.fontawesome.com/f2b83a0e92.js" crossorigin="anonymous"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Calibre</title>
</head>
<body>
    <header>
        <div>
            <ul>
                <li><a href="https://mail.google.com/mail/u/0/?tab=rm&ogbl">Gmail</a></li>
                <li><a href="https://www.google.fr/imghp?hl=fr&tab=ri&ogbl">Images</a></li>
                <li><a>Application</a></li>
                <li><a>Photo</a></li>
            </ul>
        </div>
    </header>
    <div class="section">
        <div class="image">
            
        </div>
        <div class="section bas">
            <div class="barre recherche">
                <label for="site-search"><img src="loupe.jpg" width="30" alt="loupe"></label>
                <input type="search" id="site-search" name="q"
                        aria-label="Search through site content">
            </div>
            <div class="boutons">

            </div>
            <div class="gestes barrières">

            </div>
            <div class="english">

            </div>

        </div>
    </div>
    <footer>
        <div class="bas">
            <div>
                <p class="france">France</p>
            </div>
            <div class="liens">
                <div class="gauche">
                    <p>Publicité</p>
                    <p>Entreprise</p>
                    <p>A propos</p>
                    <p>Comment fonctionne la recherche Google?</p>
                </div>
                <div class="droite">
                    <p>Info consommateurs</p>
                    <p>Confidentialité</p>
                    <p>Conditions</p>
                    <p>Paramètres</p>
                </div>
            </div>
            
        </div>
    </footer>
    
</body>
</html>

header{
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin: auto;
}


ul{
    display: flex;
    list-style: none;
    }

li{
    padding: 10px;
}

.section{
    display: flex;
    justify-content: space-around;
    



}
footer{
    height: 800px;
     
}

.bas{
    display: flex;
    flex-direction: column;
    align-content: flex-end;
     

}

.liens{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
}

.gauche{
    display: flex;
    
}

.droite{
    display: flex;
     
}

p{
    margin-left: 15px;
    margin-right: 15px;
}

Positionnement des blocs avec FlexBox

Positionnement des blocs avec FlexBox

Supprimer

Modérer

Signaler le message aux modérateurs