CSS-Flex-grid - Gleiche Breite für das Letzte Element
Hey ich bin versucht zu erstellen, eine ansprechende box-layout für eine Galerie, die wie folgt aussieht http://webdesignerwall.com/demo/responsive-column-grid/
Das problem mit dem Beispiel ist, dass die Spaltenbreiten sind hardcoded und media queries notwendig sind. Ich habe zu viele Spalten, dass das eine praktikable Lösung.
Kann ich erreichen das gleiche Ergebnis mit Flex girds, jedoch die Letzte Spalte ist größer als die anderen, wie gezeigt, in diesem CodePen:
http://codepen.io/anon/pen/zClcx
HTML
<div class="flex-container same-width same-height">
<div class="flex-item">
<div>g</div>
</div>
<div class="flex-item">
<div>g</div>
</div>
<div class="flex-item">
<div>g</div>
</div>
<div class="flex-item">
<div>why am I longer than my friends?</div>
</div>
</div>CSS
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
max-width: 950px;
flex-wrap: wrap;
justify-content: space-between;
background: grey;
& > * {
min-width: 300px;
background: green;
max-width: 404px;
flex: 1 1 auto;
}
.flex-item > div {
background: red;
}
}Frage: Wie kann ich die Letzte Spalte die gleiche Größe wie die anderen?
Hey Jungs ich habe gerade diese link, das löst das problem schön. Leider ist die Kompatibilität nicht zu groß atm. IE10 funktioniert nicht. Neueste chrome und opera sind in Ordnung.
Alles, was Sie brauchen, ist ein Präprozessor-mixin, und eine einzige Zeile code zu verwenden, mixin. Siehe hier: stackoverflow.com/a/36401995/635069
Alles, was Sie brauchen, ist ein Präprozessor-mixin, und eine einzige Zeile code zu verwenden, mixin. Siehe hier: stackoverflow.com/a/36401995/635069
InformationsquelleAutor Paul | 2013-10-28
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mithilfe einer flex-box, die Sie müssen vorsichtig sein, über Ihre
max-undmin-breiten. Zitat aus w3schools:Diesem entgegenzuwirken, initiieren eine Breite X Anzahl der Pixel für den container, aber verwenden Sie Prozentsätze, anstatt Ihre pixel-Mengen für die inneren Boxen. Der Anteil des Containers wird das gleiche für alle Ihre Spalten.
Tun dies entfernt auch die Notwendigkeit für eine flex-box, da diese nur, wenn Sie wollen expansion der Felder in horizontaler Richtung (so dass Sie breiter ist basiert auf Inhalten von jedem) eher als in vertikaler Richtung.
PS - wenn Sie möchten, dass dieser reagiert, halten Sie die breiten proportional zu dem Raum, in zwischen so gut, Prozentangaben für Ihre Margen sowie (aber im Kopf behalten, border und padding Größen). Dies ist nicht notwendig, ist aber eine nützliche Funktion für das halten eines konsistenten look and feel auf unterschiedlichen Geräten.
Hier ist, was ich sehe, in diesem codepen: i.imgur.com/Wvzosh1.jpg - das ist mit Google Chrome neueste aber auch Firefox neuste zeigt das gleiche. Der, der sagt "warum bin ich mehr..." ist die gleiche Größe wie die anderen. Können Sie uns ein screenshot von dem, was Sie sehen, oder wenn dieses nicht ist, was Sie wollen, entschuldige ich mich und würde gerne besuchen Sie diese mit mehr Details, wenn Sie es bieten kann.
Yep, sehe ich genau das gleiche wie Sie, Sir. Auch mit der neuesten Chrome. Ich denke, was ich Suche, ist ein raster wie in diesem codepen, jedoch reagieren in der Weise, dass die Behälter füllen, um den verbleibenden Raum. Zu sehen, dass Firefox nicht unterstützen auch die flex-warp-Attribut doch, das ist definitiv der falsche Weg, um darüber zu gehen. Ich glaube, ich könnte haben zu stick mit media-queries für diese Aufgabe. Vielen Dank für Ihre Hilfe.
Bitte nicht zitieren, w3school.... Es gibt viele Fehler in Ihrer Dokumentation, Ihren Namen suggerieren, dass Sie angeschlossenen W3C (open source/ - standards), aber Sie sind-profit, Sie sind SEHR oft veraltet, und viele überlegen Quellen existieren...
InformationsquelleAutor
Legen Sie die flex-grow auf 0.
fiddle: http://jsfiddle.net/RichAyotte/Ev5V7/
InformationsquelleAutor
Es ist ein verbreiteter Irrtum, aber Flexbox ist kein grid-system. Nachdem die flex-Elemente werden festgelegt, um flexibel zu sein, können Sie nur bemessen im Verhältnis zu den anderen flex-Elemente auf der gleichen Linie, nicht mit der flex-Elemente auf jeder anderen Linie. Es gibt keine Möglichkeit, Sie zu zwingen, um line-up, ohne die Verwendung einer bestimmten Breite (obwohl dieser Breite kann ein Prozentsatz).
Ihre min-width hat keinen Zweck, hier seit Ihr flex-Elemente sind flexibel. Flex-shrink-Wert dient keinem Zweck, weil die flex-items sind erlaubt zu wickeln. Die max-width ist die einzige Sache verhindern, dass die Elemente in der letzten Zeile von der Abfüllung die gesamte Zeile. Sie würde haben, um zu wissen, die genaue Breite der Elemente in der vorhergehenden Zeile, um den richtigen max-width Wert.
Verwandte:
InformationsquelleAutor