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 !).