Wie zentriert man einen Flexbox-Container? [duplicate]

Lesezeit: 3 Minuten

User-Agent

Wie das Snippet zeigt, habe ich erfolgreich ein responsives Raster erstellt.

Im Moment sehe ich die Kästchen links ausgerichtet.

Wie kann ich den Container in die Mitte der Seite stellen, ohne Padding verwenden zu müssen?

Ich habe versucht, mit margin:auto aber es hat nicht funktioniert.

.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 Geige.

Fügen Sie Ihrer Containerklasse Breite hinzu

– chirag

11. August 2016 um 12:14 Uhr
Benutzen margin:auto Ihr Container muss haben width.

– Ismail RBOUH

11. August 2016 um 12:14 Uhr
Ich habe dem Container eine Breite von 100 % hinzugefügt, aber es hatte keine Auswirkung. hier mein schnipsel: jsfiddle.net/cx1svoky/3

– User-Agent

11. August 2016 um 12:16 Uhr
Geben Sie die Breite in px an, z. B. 500px

– chirag

11. August 2016 um 12:17 Uhr
@chirag. Ich habe tatsächlich 1000px ausprobiert, aber es zentriert nicht wirklich.

– User-Agent

11. August 2016 um 12:23 Uhr

Michał Perłakowski

Verwenden justify-content: center; anstatt 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;
  }
}

Sehen justifiy-content Dokumente auf MDN.

JS Fiddle aktualisiert.

Es zentriert perfekt. Aber ich habe gerade bemerkt, dass das vierte Kästchen jetzt nicht mehr nach links schwebt. Die Idee ist, dass Kästchen von links hinzugefügt werden, um zu schreiben, wenn mehr Artikel kommen. Wenn ich zum Beispiel 7 Boxen habe, sollte die siebte Box nach links und nicht in die Mitte fließen. Hoffe, ich habe etwas Sinn gemacht.

– User-Agent

11. August 2016 um 12:30 Uhr
@WosleyAlarico Dann kannst du verwenden margin: 0 auto; B. mit fester Breite width: 800px;. Sehen JS Geige.

– Michał Perłakowski

11. August 2016 um 12:35 Uhr
Es zentriert sich nicht wirklich, wie ich zuvor in anderen Kommentaren erwähnt habe. Aber gut, das scheint die einzige Möglichkeit zu sein.

– User-Agent

11. August 2016 um 12:51 Uhr

Alaa Molkerei

Fügen Sie einfach diese Zeile zu Ihrem ursprünglichen Code hinzu:

.container{
  width: 100%
}

und lege die div Box in eine andere div die haben ein margin: auto;

Wenn Sie 2 Boxen in der gleichen Zeile benötigen, fügen Sie hinzu display: inline-table; zum box Klasse

Würde es Ihnen etwas ausmachen, eine Geige zu schicken?

– User-Agent

11. August 2016 um 12:34 Uhr

Verwenden margin:0px auto; mit einem width.

Zum Beispiel:

.container{

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

Wenn Sie also möchten, dass Kästchen von links nach rechts hinzugefügt werden und das erste Kästchen in der nächsten Reihe linksbündig ausgerichtet wird, können Sie Folgendes verwenden:`

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

Geige

14452500cookie-checkWie zentriert man einen Flexbox-Container? [duplicate]

#Ausrichtung #CSS #Flexbox #html