problème avec flexbox

Ce sujet est résolu
Default
,

Bonjour,

cela fait 2 jours que j'essaie tant bien que mal de faire une bar de navigation avec flexbox avec :

mes items centrés sur la page
un champ de formulaire à droite de l'ecran.

voici mon code :

    <div class="container">
        <div class="items">numéro 1</div>
        <div class="items">numéro 2</div>
        <div class="items">numéro 3</div>

       <div class="main_form">
        <input type="search" name="q" placeholder="Rechercher">
        <input type="submit" value="Lancer !">
        </div>
      </form>
    </div>
body {
    margin: 0;
    padding: 0px;
}

.container {
    background-color: brown;
    display: flex;
    justify-content: center;
    width: 100%;
}

.items {
    background-color: coral;
    padding: 10px;
}

.main_form {
  display: flex;
}

voici un screen de ce que j'obtiens pour le moment :

https://www.casimages.com/i/200824060038914188.png.html

quelqu'un peut m'aider et me dire ou je me trompe svp ?

4 Réponse

Default
,

Merci c'est un peu plus clair pour mpi!

Ton lien a l'air super car je vais pouvoir créer graphiquement mes container et tenter de les reproduire en codant en me basant sur les propriétés. C'est mis en favoris direct :) Merci pour l'aide

Default
,

Bonjour,

Il faut que tu rajoutes des éléments invisibles qui vont prendre toute la place libre afin que ton formulaire soit poussé tout à droite et que tes items restent centrés (par rapport à la place restante).

Solution ici

N'hésite pas à répondre si la solution ne te convient pas.

vl20100

Default
,

Bonjour,
merci pour la réponse et la solution qui me convient parfaitement.

Je t'avoue ne pas tout comprendre au code (il faut que j'étudie la propriété flex) et sinon j'ai une question. Je vais essayer d'etre le plus clair possible :)

-Dans le CSS proposé dans mon premier message -et celui de ta solution aussi- il y a un :

.main_form {
  display: flex;
}

Personnelement je dois avouer l'avoir mis un peu "au hasard" sans vraiment comprendre pourquoi, et ca m'empeche d'avancer sereinenement dans mon apprentissage.

D'après ce que j'ai compris le "display:flex;" est à placer dans le container parent (donc ici dans ".container" et celui-ci affecte tous les enfants).

Pourquoi dans ce cas le "display:flex;"placé dans ".container"n'affecte pas les<div>et le ".main_form" ?
Car lorsque l'on inspecte le code ces éléments sont toujours en display:block et non en display:flex.

J'ai l'impression de ne pas comprendre quelque chose d'évident et cela est frustrant. Ou j'avance un peu trop vite dans mon apprentissage et c'est contre-productif.

Aussi tu trouveras ici l'exemple sur lequel je me suis basé pour pratiquer la mise en page en css. Dans cette solution il n'y a aucun élément vide et cela fonctionne aussi. Pourtant j'ai beau essayer de comprendre pourquoi leur code fonctionne et pas le mien et je n'y arrive pas... et les copier/coller ce n'est pas mon truc. Si tu as le temps de me donner ton avis sur leur solution ce serait sympa :)

Encore merci pour la solution,

jeremd

Default
,

Quand tu fais un

.container{
  display: flex;
}

ton container devient un objet flex. Ce qui veut dire que ses enfant directs deviennent des flex-items. Quand tu inspecte ces éléments avec ton navigateur, il peuvent avoir n'importe quel display ce sont 2 notions différentes.

Dans l'exemple que tu cites, tous les flex-items ont la propriété flex: 1;. Ce qui veut dire que chaque flex-item prendra autant de place que les autres.

Pour faire simple, si tu as 2 flex-items, que le premier a la propriété flex: 3 et que le second a flex: 1, tes deux éléments prendront toute la place disponible. Le premier élément sera 3 fois plus grand que le second. Il existe plusieurs sites qui te permettent de jouer avec flexbox et d'expérimenter. En voici un ici. N'hésite pas a faire différents essais pour mieux comprendre. Flexbox n'est pas facile a utiliser au début mais quand tu l'as bien en main, il devient un outil fabuleux dont tu as du mal à te passer.

Bonne journée,

vl20100