Artikel mit Css flexbox ausrichten

Question

Ich möchte Objekte wie diese ausrichten.

Setzen Sie 4 Elemente in 1 Zeile und die 3 Elemente in der nächsten Zeile, aber ich möchte zentrieren ausrichten.

Obwohl ich mit 25% behoben, aber es funktioniert nicht richtig.

Bitte überprüfen here

.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.quarter { 
 
    width: 24.6%; 
 
    padding: 20px; 
 
    background-color: #b5d46e; 
 
    border: 3px solid white; 
 
    color: white; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
}

<div class='flex-container'> 
 
    <div class='quarter flex-item'> 
 
    <h3>1</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>2</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>3</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>4</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>5</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>6</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>7</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>8</h3> 
 
    </div> 
 
</div>

Answer 1

Ich würde jeden Satz von .quarter Elemente wickeln Sie in einer Linie wollen, in ihren eigenen flex-Box. Stellen Sie sicher, dass Sie jede .quarter die flex:1; Eigenschaft anstelle von Eigenschaft geben.

Zum Beispiel ist dies der HTML-Code Ihrer ersten Zeile. Hinweis auf die Geige für den gesamten Code, einschließlich wo die flex:1; Eigenschaft zu setzen.

<div class='flex-container'> 
    <div class='quarter flex-item'> 
    <h3>1</h3> 
    </div> 
    <div class='quarter flex-item'> 
    <h3>2</h3> 
    </div> 
    <div class='quarter flex-item'> 
    <h3>3</h3> 
    </div> 
    <div class='quarter flex-item'> 
    <h3>4</h3> 
    </div> 

https://jsfiddle.net/ogho96cf/

Answer 2

Put 4 Artikel in 1 Reihe und die drei Elemente in der nächsten Zeile, aber ich will Mitte auszurichten.

nicht sicher, was wir annehmen, mit dem achten Punkt zu tun, aber ...

Erstens verwenden wir box-sizing:border-box padding/Grenzen in den Breitenberechnungen einzubeziehen und die wir die Breiten einstellen können (oder flex Eigenschaft) zu:

.quarter { 
    flex: 0 1 25%; 
} 

..und wir sind fertig.

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    width: 100%; 
 
} 
 
.quarter { 
 
    flex: 0 1 25%; 
 
    padding: 20px; 
 
    background-color: #b5d46e; 
 
    border: 3px solid white; 
 
    color: white; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
}

<div class='flex-container'> 
 
    <div class='quarter flex-item'> 
 
    <h3>1</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>2</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>3</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>4</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>5</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>6</h3> 
 
    </div> 
 
    <div class='quarter flex-item'> 
 
    <h3>7</h3> 
 
    </div> 
 
</div>