J'ai un petit soucis avec l'alignement flexbox . En fait , j'ai un conteur avec plusieurs flexblox et je voudrais les aligner au centre lorsqu'il y en a 2 sur la même ligne , et ne pas aligner au centre si y a qu'une seule box . Vous comprendrez mieux avec des images :
En haut , ce que je veux obtenir , en bas , ce que j'obtiens à la place.
#container{
width: 500px; /* Largeur du conteneur */
padding: 20px; /* Padding du conteneur */
border: solid 1px #c60909; /* Bordure rouge */
display: flex; /* On le met en flex */
justify-content: space-between; /* On met un espace entre les boîtes */
flex-wrap: wrap; /* On wrap quand il n'y a pas de place */
}
.box{
margin: 10px; /* Marge extérieur pour les boîtes */
width: calc(50% - 20px); /* Largeur de chaque boîte : 50% du conteneur moins leurs marges extérieur */
height: 150px; /* Tu peux choisir */
background-color: #c60909; /* Couleur des boîtes */
}
Ok merci beaucoup pour vos réponses à 2 mais il reste encore un problème , comment centrer tout le conteneur dans la page ? Sur les exemples ci-dessus ça ne se voit pas parce que le conteneur occupe 100% de la largeur , mais en vrai il est quand même aligné à gauche si on diminue sa largeur , donc moi je voudrais le centrer sur la page , j'ai essayé un " margin:auto; " mais ça ne marche pas , la seule solution à la quelle j'ai pensé c'est de mettre un margin-left sur le conteneur mais ça me semble un peu brouillon ... des idées ?
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Petit soucis avec l'alignement flex
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Compos sui.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !