Ist es möglich, dass sich Flex-Artikel eng an den darüber liegenden Objekten ausrichten?
Dies ist in der Tat das Pinterest-Layout. Die online gefundenen Lösungen werden jedoch in Spalten verpackt, sodass der Container unbeabsichtigt horizontal wächst. Dies ist nicht das Pinterest-Layout, und es funktioniert nicht gut mit dynamisch geladenen Inhalten.
Was ich tun möchte, ist eine Reihe von Bildern mit fester Breite und asymmetrischer Höhe, die horizontal angeordnet sind, aber eine neue Reihe einschließen, wenn die Grenzen des Containers mit fester Breite erreicht werden:
Kann flexbox das tun oder muss ich auf eine JS-Lösung wie Masonry zurückgreifen?
Flexbox ist ein "1-dimensionales" Layoutsystem: Es kann Elemente an horizontalen OR - vertikalen Linien ausrichten.
Ein echtes Gittersystem ist "2-dimensional": Es kann Elemente entlang horizontaler und vertikaler Linien ausrichten. Mit anderen Worten, Zellen können sich über Spalten und Zeilen erstrecken, was Flexbox nicht kann.
Aus diesem Grund verfügt die flexbox über eine begrenzte Kapazität zum Erstellen von Netzen. Dies ist auch ein Grund, warum der W3C eine weitere CSS3-Technologie entwickelt hat, Grid Layout (siehe unten).
In einem Flex-Container mit flex-flow: row wrap müssen Flex-Elemente in neue Zeilen umgebrochen werden.
Dies bedeutet, dass ein Flex-Element kann nicht unter einem anderen Element in derselben Zeile angeordnet werden.
Beachten Sie oben, wie div # 3 unter div # 1 umläuft und eine neue Zeile entsteht. Es kann nicht unter div # 2 eingeschlossen werden.
Wenn Elemente nicht das höchste Element in der Reihe sind, bleibt der Leerraum übrig und erzeugt unansehnliche Lücken.
Bildnachweis: Jefree Sujit
column wrap Lösung
Wenn Sie zu flex-flow: column wrap wechseln, werden Flex-Elemente vertikal gestapelt und ein gitterähnliches Layout ist besser erreichbar. Ein Container in Säulenrichtung hat jedoch gleich drei potenzielle Probleme:
- Der Container wird horizontal erweitert (nicht wie beim Pinterest-Layout).
- Der Container muss eine feste Höhe haben, sodass die Artikel wissen, wo sie verpackt werden sollen.
- Zum jetzigen Zeitpunkt hat es einen Mangel in allen gängigen Browsern, wo der Container nicht erweitert wird, um zusätzliche Spalten aufzunehmen .
Daher ist ein Container in Säulenrichtung in vielen Fällen möglicherweise nicht realisierbar.
Andere Lösungen
Container hinzufügen
Berücksichtigen Sie in den ersten beiden Bildern, ob Sie die Elemente 2 und 3 in einem separaten Container verpacken möchten. Dieser neue Container kann ein Gegenstand von Punkt 1 sein. Fertig.
Hier ein detailliertes Beispiel: Tastaturbelegung des Rechners mit Flexbox
Ein Nachteil ist hervorzuheben: Wenn Sie die
order-Eigenschaft verwenden möchten, um Ihr Layout neu anzuordnen (z. B. in Medienabfragen), kann diese Option durch diese Methode eliminiert werden.Mauerwerk ist eine JavaScript-Layout-Bibliothek. Es Funktioniert durch Platzieren von Elementen in optimaler Position basierend auf verfügbaren vertikaler Raum, irgendwie wie ein Maurer, der Steine in eine Wand einfügt.
quelle: http://masonry.desandro.com/
Wie man eine Seite baut, die wie Pinterest funktioniert
[Pinterest] ist wirklich eine coole Seite, aber ich finde es interessant, wie diese Pinboards angelegt werden ... Der Zweck dieses Tutorials ist es, diesen responsiven Blockeffekt selbst neu zu erstellen ...
CSS-Rasterlayout-Modul Ebene 1
Dieses CSS-Modul definiert ein zweidimensionales gitterbasiertes Layoutsystem, das für das Design der Benutzeroberfläche optimiert ist. Im Rasterlayoutmodell können die untergeordneten Elemente eines Gittercontainers in beliebigen Steckplätzen in einem vordefinierten flexiblen oder festen Layoutraster positioniert werden.
Rasterlayout-Beispiel: CSS-only-Mauerwerkslayout, jedoch mit horizontal angeordneten Elementen
Was Sie wollen, können Sie in erreichen 3 2 Möglichkeiten, CSS weise:
1. flexbox:
.parent { display: flex; flex-direction: column; flex-wrap: wrap; max-width: {max-width-of-container} /* normally 100%, in a relative container */ min-height: {min-height-of-container}; /* i'd use vh here */ } .child { width: {column-width}; display: block; }
2. CSS-Spalten
(Diese Lösung hat den sehr ordentlichen Vorteil der eingebauten column-span - ziemlich praktisch für Titel). Der Nachteil ist das Ordnen von Artikeln in Spalten (die erste Spalte enthält das erste Drittel der Artikel usw.). Ich habe ein jsFiddle dafür gemacht.
.parent {
-webkit-columns: {column width} {number of columns}; /* Chrome, Safari, Opera */
-moz-columns: {column width} {number of columns}; /* Firefox */
columns: {column width} {number of columns};
}
.child {
width: {column width};
}
/* where {column width} is usually fixed size
* and {number of columns} is the maximum number of columns.
* Additionally, to avoid breaks inside your elements, you want to add:
*/
.child {
display: inline-block;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
3. Masonry Plugin
absolute Positionierung nach Berechnung der gerenderten Artikelgröße über JavaScript (Maurer-Plugin).
der Ansatz column scheint ein guter Kompromiss zu sein, wenn Sie column-width über vmin oder vmax units setzen und column-count (erstes Snippet), display:grid und löschen vmin ist auch eine Option für das Futur (zweites Snippet).
ausschnitt aus @Lanti Antwort inspiriert.
test Demo mit vmin
.container {
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
font-size: 0;
}
.portfolio ul {
-webkit-column-width:50vmin;
-moz-column-width:50vmin;
column-width:50vmin;
-webkit-column-fill:balance;
-moz-column-fill:balance;
column-fill:balance;
-webkit-column-gap: 3px;
-moz-column-gap: 3px;
column-gap: 3px;
}
.portfolio ul:hover img {
opacity: 0.3;
}
.portfolio ul:hover img:hover {
opacity: 1;
}
.portfolio ul li {
margin-bottom: 3px;
}
.portfolio ul li img {
max-width: 100%;
transition: 0.8s opacity;
}<section class="container portfolio">
<ul>
<li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li>
</ul>
</section>ein Link unter anderen https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
display:grid coud macht es auch mit dem automatischen Ausfüllen einfach, aber es muss ein Bereich für das größte Bild gesetzt werden, damit Zeilen und Spalten unvollständig werden können
.container {}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
font-size: 0;
}
.portfolio ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50vmin, 1fr));
grid-gap: 5px;
grid-auto-rows: minmax(10px, 1fr);
grid-auto-flow: dense;
}
.portfolio ul:hover img {
opacity: 0.3;
}
.portfolio ul:hover img:hover {
opacity: 1;
}
.portfolio ul li {
margin-bottom: 3px;
}
.portfolio ul li img {
max-width: 100%;
transition: 0.8s opacity;
}
li {
border: solid blue;
grid-row-end: span 1;
display: flex;
align-items: center;
background: lightgray;
}
li:nth-child(1),
li:nth-child(3),
li:nth-child(6),
li:nth-child(7),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(11) {
border: solid red;
grid-row-end: span 2
}<section class="container portfolio">
<ul>
<li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li>
</ul>
</section>sie sehen https://css-tricks.com/snippets/css/complete-guide-grid/
Sie können den Mauerwerk-Effekt wie in Ihrem Screenshot erzielen, aber Sie haben die Höhe des äußeren Bereichs dynamisch festgelegt
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.item-list {
max-width: 400px;
border: 1px solid red;
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vw;
}
.item-list__item {
border: 1px solid green;
width: 50%;
}<div class="item-list" >
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
county enough the figure former add. Do sang my he next mr soon. It merely waited do unable.
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
</div>
</div>Anstelle von flexbox empfehle ich die Verwendung von column für solche Raster. Wie Sie sehen, kann der Abstand auf den unteren Bildern besser sein, aber für eine native CSS-Lösung halte ich das für ziemlich ordentlich. Nicht mehr JS:
.container {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
font-size: 0;
}
.portfolio ul {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 3px;
-webkit-column-gap: 3px;
column-gap: 3px;
}
.portfolio ul:hover img {
opacity: 0.3;
}
.portfolio ul:hover img:hover {
opacity: 1;
}
.portfolio ul li {
margin-bottom: 3px;
}
.portfolio ul li img {
max-width: 100%;
transition: 0.8s opacity;
}<section class="container portfolio">
<ul>
<li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li>
</ul>
</section>