web-dev-qa-db-fra.com

Comment centrer un conteneur flexbox?

J'ai réussi à créer une grille réactive comme le montre l'extrait de code.

Pour le moment, je vois les cases alignées à gauche.

Comment puis-je placer le conteneur au centre de la page sans avoir à utiliser de remplissage?

J'ai essayé d'utiliser margin:auto Mais cela n'a pas fonctionné.

.container{
    display:flex;
    flex-wrap:wrap;
    text-align:center;
    margin:auto;
}
.box{
    width:100%;
    max-width:30%;
    border:1px solid red;
    margin:5px;
}
@media only screen and ( max-width:768px ){     
    .box{
        width:100%;
        max-width:40%;
        border:1px solid red;
    }
}
<section class="container">
    <div class="box">
        <h1>This is the first box</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam.</p>
    </div>
</section>

JS Fiddle .

htmlcsshtml5alignmentflexbox
12
deSousa

Utilisation justify-content: center; au lieu de margin: auto;:

.container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}
.box {
   width: 100%;
   max-width: 30%;
   border: 1px solid red;
   margin: 5px;
}
@media only screen and (max-width: 768px) { 
  .box {
    width: 100%;
    max-width: 40%;
    border: 1px solid red;
  }
}

Voir justifiy-content documents sur MDN .

JS Fiddle mis à jour.

12
Michał Perłakowski

ajoutez simplement cette ligne à votre code d'origine:

.container{
  width: 100%
}

et placez la boîte div dans une autre div qui a un margin: auto;

si vous avez besoin de 2 cases sur la même ligne, ajoutez display: inline-table; à la classe box

0
Alaa DAIRY

Utilisation margin:0px auto; avec un width.

Par exemple:

.container{

display:flex;
flex-wrap:wrap;
text-align:center;
margin:0px auto;
width: 400px;
}
0
2dsharp

Donc, si vous souhaitez que des cases soient ajoutées de gauche à droite et que la première case de la ligne suivante soit alignée à gauche, vous pouvez utiliser: `

.container {
  display:flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin: 0 auto;
  border: 1px solid red;
}
.container:after {
  content: "";
  flex: auto;
}

Violon

0
Julsy