Aide disposition flexbox

18 octobre 2020 à 20:07:28

Bonjour,

Comment puis-je obtenir les résultats suivants en utilisant Flexbox :

Avec pour code html :

<div id="container">

   <div id="rouge"></div>

   <div id="vert"></div>

   <div id="bleu"></div>

</div>

Merci d'avance !!!

-
Edité par raptor6578 18 octobre 2020 à 20:09:03

xakula

18 octobre 2020 à 21:03:24

Facile facile. Tout est marqué dans le cours de Nebra, à la rubrique flexbox. Tes cas sont même ceux du cours.

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

raptor6578

18 octobre 2020 à 21:35:38

Le cours explique comment faire un retour à la ligne avec un flex-wrap: wrap quand la largeur du parent est insuffisante, c'est pas ce que je cherche.

NadfriJS

18 octobre 2020 à 21:35:47

Salut, je peux te proposer cela, mais si quelqu'un à une meilleure proposition pour le 2eme cas, je suis preneur:

https://jsfiddle.net/sLjbfxrh/3/

La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

raptor6578

18 octobre 2020 à 21:45:02

Merci NadfriJS, mais ton exemple est valable si le container a une hauteur prédéfini et tu le descends tout en bas du coup.

xakula

18 octobre 2020 à 22:15:31

raptor6578 a écrit:

Le cours explique comment faire un retour à la ligne avec un flex-wrap: wrap quand la largeur du parent est insuffisante, c'est pas ce que je cherche.

Je te donne une piste. T'en veux pas, bah t'en veux pas. Que veux tu que je te dise .

-
Edité par xakula 18 octobre 2020 à 22:16:34

NadfriJS

18 octobre 2020 à 22:19:13

C'est le principe justement de align-self: flex-end.

Se positionner en bas du container. Si le containeur n'a pas de taille définie, rien ne pourra bouger verticalement avec les outils flexbox. Faudrait passer par position: absolute et mettre des top/left ect...on perd l'interet du flex.

La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

xakula

18 octobre 2020 à 23:16:21

Variante: align-self.

Kovsky

19 octobre 2020 à 0:01:27

Si t'as la solution avec flexbox je suis preneur, sinon il y a ça qui fonctionne pas mal.

https://codepen.io/barbgegrasse/pen/vYKKgyw?editors=1100

-
Edité par Kovsky 19 octobre 2020 à 0:01:52

Développeur react freelance à Toulouse

Je suis développeur react freelance spécialisé dans la création de site internet basé à Toulouse

xakula

19 octobre 2020 à 0:29:01

Kovsky a écrit:

Si t'as la solution avec flexbox je suis preneur, sinon il y a ça qui fonctionne pas mal.

https://codepen.io/barbgegrasse/pen/vYKKgyw?editors=1100

-
Edité par Kovsky il y a 12 minutes

1er cas:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style>
/*donées stables*/
.rouge,.vert,.bleu {width:30px;height:30px;margin:10px;}
.rouge{background-color: red;}
.vert{background-color: green;}
.bleu{background-color: blue;}

/*modif avec flex*/
.conteneur{height:90px;display:flex; flex-direction: row; justify-content: space-between;}
.groupe{display:flex;}
    </style>




</head>
<body>
<div class="conteneur">
  <div class="rouge"></div> 
  <div class="groupe">
    <div class="vert"></div>
    <div class="bleu"></div>
    </div> 
</div>


</body>
</html>

2eme:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style>
/*donées stables*/
.rouge,.vert,.bleu {width:30px;height:30px;margin:10px;}
.rouge{background-color: red;}
.vert{background-color: green;align-self: flex-end;}
.bleu{background-color: blue;}

/*modif avec flex*/
.conteneur{height:150px;display:flex; flex-direction: row; justify-content: space-between;}

    </style>




</head>
<body>
<div class="conteneur">
  <div class="rouge"></div> 
    <div class="vert"></div>
    <div class="bleu"></div>
    </div> 
</div>


</body>
</html>

Kovsky

19 octobre 2020 à 9:13:52

C'est sympa Xakula, mais tu ne respectes pas le cahier des charges qui est avec pour code html

<div id="container">
 
   <div id="rouge"></div>
 
   <div id="vert"></div>
 
   <div id="bleu"></div>
 
</div>

rajouter une div au passage me semble un peu tricher :-°

Développeur react freelance à Toulouse

Je suis développeur react freelance spécialisé dans la création de site internet basé à Toulouse