Envoyer votre code
1
2
QCM
La répons est NON !
Pour vous en convaincre tapez
.flex-conteneur {
display:flex
;}
.flex-conteneur *{
flex:auto;
}
#it1:before {content: attr(data-blabla);}
#it2:before {content: attr(data-blabla);}
semaine 12+13
HELP
A) Donner le résultat du code Simulateur
.conteneur { display:flex; flex-wrap:wrap; } .conteneur> *{ flex:0 0 25%}
#it1 { border:1px solid; }
Avez vous compris pourquoi nous n'avons pas 4 blocs en ligne (4*25%+2px > 100%) !
Help : box-sizing
B) Nous avons vu en cours en inspectant le menu de bootstrap qu'il y a du flex dans du flex dans du flex ...
Dans le test : http://dupontl1.blogspot.com/2021/04/quizz-flex.html
La dernière question est surprenante !
Relisez comment centrer les blocs
https://docs.google.com/document/d/1sDsYJA5do3jRYDyGDD_mSSjqjTg3Zx__mzhkYeIEzeY/edit?usp=sharing
Code https://github.com/mdn/css-examples/tree/master/flexbox/use-cases allez dans center.html
Bilan :
La solution n'est pas !
.flex-conteneur { display: flex; align-items: center; justify-content: center; }
👍 Flex dans du Flex ...
Il faut centrer le texte à l'intérieur du bloc 1 et 2.
Ecrirez pour simuler le bloc rouge #it1 carré :
#it1 {
height: 200px;
width: 200px !important;
}
Et considérez maintenant que le bloc #it1 est un bloc conteneur de son texte. Autrement dit, appliquez lui les règles que l'on a appliquées précédemment au bloc .flex-conteneur (you got it !).
Les deux plaies de flex !
Dans le simulateur http://dupontcss.blogspot.com/p/test-grill.html écrire le CSS
.conteneur { display:flex; flex-wrap:wrap; } .conteneur> *{ flex:0 0 33.333333%}
👍Jusque là tout va bien ! Les trois blocs se partagent les 100% de largeur avec chacun une taille de 33.3333%.
La galère des bordures
Ajouter une bordure de 1px à un des blocs. La largeur va donc passer à 33.3333%+2px.
#it1 { border:1px solid; }
👎 l'ajout de la bordure a une conséquence évidente.
Il est hors de question de diminuer la largeur des blocs à 30% pour corriger ce débordement.
La solution consiste à écrire la règle box-sizing: border-box;
.conteneur> *{ 👍 box-sizing: border-box; flex:0 0 33.333333%}
La bordure fait maintenant partie de la boite et ne s'ajoute pas aux 33.3333%.
Autre galère la Marge !
Nous voulons simplement espacer nos blocs. Pour cela nous ajoutons une marge.
.conteneur> *{
box-sizing: border-box;
margin-left:10px;
flex:0 0 33.333333%}
👎Si on ajoute une marge pour espacer les boîtes il y a augmentation de la largeur.
Le problème de la marge est plus délicat. C'est un problème devenu classique et traité dans la littérature. La solution consiste à intégrer une gouttière.
Les gouttières
X-gap !
Tester ces solutions avec des %
Correction ++
Chalenge
Cloner https://github.com/dupontdenis/teamFlex
Votre équipe de foot a un comportement intéressant en redimensionnant le média.
Adapter votre CSS (on ne touche pas au HTML) pour prendre en compte l'arrivée de SUPERDUPONT dans le fichier superDUPONT.html
Quizz : flex
Inscription à :
Articles (Atom)