2016-07-10 16 views
1

Ich habe eine Flexbox mit zwei Elementen eingerichtet, die links und rechts auf einem normalen Bildschirm sein sollte.Center Flex Artikel auf Wrap

Wenn der Bildschirm nicht groß genug ist, um beide nebeneinander anzuzeigen, sollte es sich umwickeln, aber dann sollten sie zentriert und nicht auf der linken Seite ausgerichtet sein.

Ich versuchte verschiedene Lösungen (wie margin: auto auf die untergeordneten Elemente verwenden), aber das ausgerichtet sie mehr auf das Zentrum, auch wenn in der gleichen Zeile.

hier ein vereinfachtes Beispiel ist:

.container { 
 
    display: flex; 
 
    align-items: flex-end; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    border: 1px solid black; 
 
    margin-bottom: 25px; 
 
} 
 
.large { 
 
    width: 500px; 
 
} 
 
.small { 
 
    width: 175px; 
 
} 
 
.item { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    margin: 25px 0px; 
 
}
<div class="container large"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div> 
 

 
<div class="container small"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

https://jsfiddle.net/SoWhy/zfx4ub8x/

Der erste Behälter ist die beabsichtigte Positionierung, der zweite Behälter auf einem kleineren Bildschirm denselben Behälter emuliert Beachten richten Sie nach links aus.

Gibt es eine Möglichkeit, zu definieren, dass die flexbox Objekte beim Umbrechen anders ausrichten soll oder nur mit der "@media screen" -Methode (die eine bestimmte Größe erfordert und daher nicht flexibel ist, wenn die Größe der Artikel ändert sich)?

+0

Nein, Flexbox kann that..it ist eine gemeinsame Anforderung nicht. –

Antwort

0

Hinweis: Sie müssen Medienabfrage für verschiedene Breiten verwenden.

Keine Möglichkeit zu erkennen, wenn es mit css3 umhüllt ist.

Wenn Sie möchten Artikel display:inline-flex und justify-content: center; zum Behälter verwenden Zentrum und margin: 0 auto; Klasse item

.container { 
    display: flex; 
    align-items: flex-end; 
    flex-wrap: nowrap; 
    justify-content: space-between; 
    border: 1px solid black; 
    margin-bottom: 25px; 
} 
.item { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    margin: 25px; 
    margin: 0 auto; 
} 

Es wickelt, wenn die Behältergröße von weniger als 200 Pixel ist.

Click to see center aligned example in JsFiddle

Wenn Sie flex-wrap: nowrap in einzelnen Positionen zu halten - die Flex-Elemente Kräfte in einer einzigen Zeile zu bleiben gezwungen.

So wird der Stil für .container wie folgt aussehen.

.container { 
    display: flex; 
    align-items: flex-end; 
    flex-wrap: nowrap; 
    justify-content: space-between; 
    border: 1px solid black; 
    margin-bottom: 25px; 
} 

Click to see items forced to stay single line in JsFiddle

+0

Ich möchte nicht, dass sie in einer einzigen Zeile bleiben. Auf kleinen Geräten möchte ich sie gewickelt - nur anders ausgerichtet. Ihre Lösungen machen die Elemente kleiner – SoWhy

+0

@SoWhy Sie müssen Medienabfrage für verschiedene Breiten verwenden. Meine Antwort wird jetzt überprüft. –

1

Dies kann nicht in Ihrem Fall arbeiten, aber es lohnt sich dieses weniger bekannte Unterschied zwischen justify-content: space-between und justify-content: space-around zu erwähnen.

Von der Flexbox Spezifikation:

8.2. Axis Alignment: the justify-content property

Die justify-content Eigenschaft richtet flex Elemente entlang der Hauptachse der aktuellen Zeile des flexiblen Behälters.

Es gibt fünf Werte, die für gelten. Hier sind zwei von ihnen:

space-between

Flex Elemente sind gleichmäßig in der Linie verteilt.

Wenn der verbleibende freie Speicherplatz negativ ist oder nur ein einzelner Flex-Eintrag in der Zeile vorhanden ist, ist dieser Wert identisch mit flex-start.

Dies erklärt, warum Ihre Artikel links auf Wrap mit space-between ausgerichtet sind.

Nun ein Blick auf space-around:

space-around

Flex Elemente werden in der Linie, mit halber Größe Räume an beiden Enden gleichmäßig verteilt.

Wenn der verbleibende Freiraum negativ ist oder nur ein Flex-Element in der Linie vorhanden ist, ist dieser Wert identisch mit center.

damit zur Mitte auszurichten flex Elemente auf Wrap, betrachten space-around verwenden.

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; /* ADJUSTMENT */ 
 
    border: 1px solid black; 
 
} 
 
.item { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    margin: 25px; 
 
}
<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

Revised Fiddle

+0

Aber mit Leerzeichen haben die Artikel "halb-Leerzeichen auf beiden Seiten" (nach der Erklärung, die Sie gepostet haben). Ich will diese Räume nicht, ich möchte, dass die Gegenstände so weit auseinander liegen wie möglich, wenn sie nicht eingepackt sind. – SoWhy

+0

Die 25px-Ränder waren nur so, dass sie im Beispiel besser zu sehen sind. Entschuldigung für die Verwirrung. In der realen Anwendung wären die Ränder "25px 0px", d.h. e. kein Rand links oder rechts – SoWhy

+0

Wenn es einen Hack gibt, der den Job erledigt, bin ich immer offen dafür. ;-) – SoWhy

Verwandte Themen