Wie center ein flex-container, sondern Links-align flex-Elemente
Möchte ich die flex-Elemente zentriert werden, aber wenn wir eine zweite Linie, haben 5 (ab Bild unten), unter 1 und nicht zentriert in der übergeordneten.
Hier ein Beispiel von dem, was ich habe:
CSS:
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
border: 1px solid gray;
margin: 15px;
padding: 5px;
width: 200px;
}
HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
http://jsfiddle.net/8jqbjese/2/
Du musst angemeldet sein, um einen Kommentar abzugeben.
Flexbox-Herausforderung & Begrenzung
Die Herausforderung ist die Mitte einer Gruppe von flex-Elemente und Links-richten Sie Sie auf wickeln. Aber es sei denn, es gibt eine Feste Anzahl von Feldern pro Zeile, und jede box ist mit fester Breite, das ist derzeit nicht möglich mit flexbox.
Mit dem code, geschrieben in der die Frage, können wir erstellen eine neue flex-container umschließt die aktuellen flex-container (
ul
), die es uns erlauben würde, um die Mitte derul
mitjustify-content: center
.Dann die flex-items der
ul
werden könnte, Linksbündig mitjustify-content: flex-start
.Dies schafft eine zentrierte Gruppe von Links-ausgerichtete flex-Elemente.
Das problem mit dieser Methode ist, dass bei bestimmten Bildschirmgrößen gibt es eine Lücke auf der rechten Seite des
ul
, so dass es nicht mehr erscheinen zentriert.Dies geschieht, weil in der flex-layout (und eigentlich auch CSS im Allgemeinen) der container:
Die maximale Länge der whitespace auf der rechten Seite ist die Länge des flex-Element, das den container hatte erwartet, dort zu sein.
In der folgenden demo -, durch re-Dimensionierung der Fenster, horizontal, sehen Sie die Leerzeichen kommen und gehen.
DEMO
Einen Mehr Praktischen Ansatz
Die gewünschte Anordnung erreicht werden kann, ohne flexbox mit
inline-block
und media queries.HTML
CSS
Der obige code erzeugt einen horizontal zentrierten container mit Links ausgerichtet child-Elemente wie diese:
DEMO
Andere Optionen
korrekte Auslegung und Ausrichtung der flex-Position(en) auf der letzten Zeile
Desandro Mauerwerk
"CSS Grid Layout Module Level 1
Als @michael schlug vor, dies ist eine Einschränkung mit der aktuellen flexbox. Aber wenn Sie wollen immer noch verwenden
flex
undjustify-content: center;
, dann können wir dies umgehen, indem ein " Pseudo -li
- element, und weisen Siemargin-left
.Überprüfen Sie diese Geige (Größe und sehen ) oder video-Referenz