Ist es möglich, für flex-Elemente ausrichten, die eng an die Artikel über Sie?

Dies ist in der Tat, das Pinterest-layout. Allerdings, die Lösungen online zu finden sind, verpackt in Spalten, das heißt, dass der Behälter versehentlich wächst horizontal. Das ist nicht das Pinterest-layout, und es funktioniert nicht mit dynamisch geladenen Inhalten.

Was ich will zu tun ist, haben eine Reihe von Bildern mit fester Breite und asymmetrische Höhe, horizontal angeordnet, aber das einwickeln in eine neue Zeile, wenn die Grenzen des fixed-width-container erfüllt sind:

Können flexbox tun, oder muss ich zurückgreifen auf eine JS-Lösung wie Mauerwerk?

Es ist nicht klar, was die Reihenfolge der Elemente sein sollte und es ist ziemlich wichtig. Könntest du Nummern?
Wenn ich etwa, dass, aber es könnte Schränken die möglichen Antworten. Ich weiß, dass die top-drei wäre 1, 2, 3 von Links nach rechts, aber ich weiß nicht wirklich, ob 4 unten 1, 2 oder 3. (Falls senkrechter Platzierung sind die Kriterien, es sollte unter 3; wenn die horizontale Platzierung, sollte es unter 1.) Geht alles!
Keine flexbox ist keine gute Lösung für dieses layout verwenden, sollten Sie das Mauerwerk oder im schlimmsten Fall den css-Spalten, die ähnlich meine Antwort auf diese Frage, so könnte es Ihnen helfen, stackoverflow.com/questions/34417059/...
stackoverflow.com/questions/8470070/...
Ein bisschen spät auf der party, hier ist die answer to a similar question von Evan Sharp, der Autor des Pinterest-Skript und co-Gründer von Pinterest, der Erklärung der Logik.

InformationsquelleAutor Guybrush Threepwood | 2015-12-27

34

Flexbox ist eine "1-dimensional" - layout-system: Es können ausrichten von Elementen entlang der horizontalen ODER vertikalen Linien.

Einem echten grid-system ist "2-dimensional": Es kann ausrichten von Elementen entlang der horizontalen UND vertikalen Linien. In anderen Worten, können die Zellen erstrecken sich über Spalten und Zeilen, die flexbox nicht.

Dies ist der Grund, warum flexbox hat eine begrenzte Kapazität für Gebäude Stromnetze. Es ist auch ein Grund, warum die W3C entwickelt hat, ein weiterer CSS3-Technologie, Grid-Layout (siehe unten).

In einem flex-container mit flex-flow: row wrap -, flex-Elemente umhüllt werden muss, um neue Zeilen.

Dies bedeutet, dass ein flex-Element kann nicht wickeln, unter einem anderen Element in der gleichen Zeile.

Ankündigung vor, wie div #3 wraps unten div #1, erstellen Sie eine neue Zeile. Es kann nicht wickeln unter div #2.

Als Ergebnis, wenn die Elemente nicht die höchste in der Zeile, Leerzeichen bleibt, erstellen unschöne Lücken.

^{Bild-Kredit: Jefree Er}

column wrap Lösung

Wenn Sie mit dem Schalter flex-flow: column wrap -, flex-Elemente-Stapel vertikal und ein raster-ähnliches layout ist mehr erreichbar. Jedoch, einer Spalten-Richtung container hat drei potentielle Probleme, die rechts von der Fledermaus:
1. Es erweitert die container horizontal, nicht vertikal (wie das Pinterest-layout).
2. Es erfordert die container haben eine Feste Höhe, so dass die Elemente wissen, wo Sie zu wickeln.
3. Als dies geschrieben wurde, hat es einen Mangel in allen gängigen Browsern, wo die container nicht zu erweitern, um Platz für zusätzliche Spalten.
Als Ergebnis einer Spalten-Richtung container kann nicht möglich sein in vielen Fällen.

Anderen Lösungen
- Hinzufügen Behälter
  
  In den ersten beiden Bildern oben, wrappen Elemente 2 und 3 in einem separaten Behälter. Diese neuen container sein kann, ein Geschwisterchen zu Punkt 1. Getan.
  
  Hier ein ausführliches Beispiel: Rechner-Tastatur-layout mit flexbox
  
  Einen Nachteil hervorzuheben: Wenn Sie wollen, verwenden Sie die order - Eigenschaft neu zu arrangieren, Ihr layout (wie bei media-queries), kann dieses Verfahren zu beseitigen, die option.
- Desandro Mauerwerk
  
  Masonry ist ein JavaScript-grid-layout-Bibliothek. Es
  funktioniert, indem Sie Elemente in der optimalen position basierend auf verfügbaren
  der vertikale Raum, wie eine Art mason passende Steine in einer Mauer.
  
  ^{Quelle: http://masonry.desandro.com/}
- Wie, um eine Website zu Bauen, die Funktioniert Wie Pinterest
  
  [Pinterest] ist wirklich eine Coole Seite, aber was ich interessant finde ist, wie diese Listen sind angelegt... Also ist der Zweck dieses Tutorials ist es, neu erstellen, diese reaktionsschnell Weg blockieren Wirkung uns selbst...
  
  ^{Quelle: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}
- "CSS Grid Layout Module Level 1
  
  Diese CSS-Modul definiert ein zweidimensionales grid-basiertes layout-system, optimiert für user-interface-design. In der grid-layout-Modell, den Kindern einen grid-container platziert werden können, in beliebige slots in einem vordefinierten, flexiblen oder festen-size-layout-grid.
  
  ^{Quelle: https://drafts.csswg.org/css-grid/}
  
  Grid-Layout Beispiel: CSS-only-Mauerwerk-layout, aber mit Elementen bestellt, horizontal
InformationsquelleAutor Michael_B
4

Was Sie wollen, erreicht werden kann 3 2 Möglichkeiten, die 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 der sehr gepflegte Vorteil, integrierte column-span - sehr praktisch für den Titel). Der Nachteil ist die Bestellung von Artikeln die in den Spalten (erste Spalte enthält das erste Drittel der Elemente und so weiter...). Ich machte eine jsFiddle für diese.
```
    .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. Mauerwerk plugin

absolute Positionierung nach der Berechnung gerendert Element-Größen, über JavaScript (Mauerwerk plugin).

#1 funktioniert bei mir nicht mehr auf den neuesten Firefox (ich sollte update mit einem Spielplatz Beispiel; das tun wird). #2 eigentlich ganz nahe gekommen mit ein paar Macken ausgearbeitet werden, aber ich verstehe es verwendet die neue CSS-grid-system, dass sehr schlechte browser-Unterstützung.
Du hast Recht, über #1. Ich war nicht in der Lage zu machen, arbeiten mit flex. Nicht sicher, was Sie bedeuten, von "sehr schlechte browser-Unterstützung". Können Sie mir einige zahlen, bitte? Ich denke #2 hat Probleme für weniger als 5% der Benutzer. Korrigieren Sie mich, wenn ich falsch bin.
Wenn Sie einen Blick auf die Verwendung Relativer Werte, die grid-system ist nicht für eine große Anzahl von Benutzern, so dass es wahrscheinlich nicht die Produktion bereit noch. Es ist eine großartige Lösung, wenn, Dank für, die. caniuse.com/#search=grid
Faszinierend. Können Sie vor Ort alle Unterschiede zwischen grid und Spalten?
lol war das sarkastisch gemeint? In jedem Fall, du hast Recht.

InformationsquelleAutor Andrei Gheorghiu
36

Flexbox ist eine "1-dimensional" - layout-system: Es können ausrichten von Elementen entlang der horizontalen ODER vertikalen Linien.

Einem echten grid-system ist "2-dimensional": Es kann ausrichten von Elementen entlang der horizontalen UND vertikalen Linien. In anderen Worten, können die Zellen erstrecken sich über Spalten und Zeilen, die flexbox nicht.

Dies ist der Grund, warum flexbox hat eine begrenzte Kapazität für Gebäude Stromnetze. Es ist auch ein Grund, warum die W3C entwickelt hat, ein weiterer CSS3-Technologie, Grid-Layout (siehe unten).

In einem flex-container mit flex-flow: row wrap -, flex-Elemente umhüllt werden muss, um neue Zeilen.

Dies bedeutet, dass ein flex-Element kann nicht wickeln, unter einem anderen Element in der gleichen Zeile.

Ankündigung vor, wie div #3 wraps unten div #1, erstellen Sie eine neue Zeile. Es kann nicht wickeln unter div #2.

Als Ergebnis, wenn die Elemente nicht die höchste in der Zeile, Leerzeichen bleibt, erstellen unschöne Lücken.

^{Bild-Kredit: Jefree Er}

column wrap Lösung

Wenn Sie mit dem Schalter flex-flow: column wrap -, flex-Elemente-Stapel vertikal und ein raster-ähnliches layout ist mehr erreichbar. Jedoch, einer Spalten-Richtung container hat drei potentielle Probleme, die rechts von der Fledermaus:
1. Es erweitert die container horizontal, nicht vertikal (wie das Pinterest-layout).
2. Es erfordert die container haben eine Feste Höhe, so dass die Elemente wissen, wo Sie zu wickeln.
3. Als dies geschrieben wurde, hat es einen Mangel in allen gängigen Browsern, wo die container nicht zu erweitern, um Platz für zusätzliche Spalten.
Als Ergebnis einer Spalten-Richtung container kann nicht möglich sein in vielen Fällen.

Anderen Lösungen
- Hinzufügen Behälter
  
  In den ersten beiden Bildern oben, wrappen Elemente 2 und 3 in einem separaten Behälter. Diese neuen container sein kann, ein Geschwisterchen zu Punkt 1. Getan.
  
  Hier ein ausführliches Beispiel: Rechner-Tastatur-layout mit flexbox
  
  Einen Nachteil hervorzuheben: Wenn Sie wollen, verwenden Sie die order - Eigenschaft neu zu arrangieren, Ihr layout (wie bei media-queries), kann dieses Verfahren zu beseitigen, die option.
- Desandro Mauerwerk
  
  Masonry ist ein JavaScript-grid-layout-Bibliothek. Es
  funktioniert, indem Sie Elemente in der optimalen position basierend auf verfügbaren
  der vertikale Raum, wie eine Art mason passende Steine in einer Mauer.
  
  ^{Quelle: http://masonry.desandro.com/}
- Wie, um eine Website zu Bauen, die Funktioniert Wie Pinterest
  
  [Pinterest] ist wirklich eine Coole Seite, aber was ich interessant finde ist, wie diese Listen sind angelegt... Also ist der Zweck dieses Tutorials ist es, neu erstellen, diese reaktionsschnell Weg blockieren Wirkung uns selbst...
  
  ^{Quelle: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}
- "CSS Grid Layout Module Level 1
  
  Diese CSS-Modul definiert ein zweidimensionales grid-basiertes layout-system, optimiert für user-interface-design. In der grid-layout-Modell, den Kindern einen grid-container platziert werden können, in beliebige slots in einem vordefinierten, flexiblen oder festen-size-layout-grid.
  
  ^{Quelle: https://drafts.csswg.org/css-grid/}
  
  Grid-Layout Beispiel: CSS-only-Mauerwerk-layout, aber mit Elementen bestellt, horizontal
InformationsquelleAutor Michael_B
4

Was Sie wollen, erreicht werden kann 3 2 Möglichkeiten, die 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 der sehr gepflegte Vorteil, integrierte column-span - sehr praktisch für den Titel). Der Nachteil ist die Bestellung von Artikeln die in den Spalten (erste Spalte enthält das erste Drittel der Elemente und so weiter...). Ich machte eine jsFiddle für diese.
```
    .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. Mauerwerk plugin

absolute Positionierung nach der Berechnung gerendert Element-Größen, über JavaScript (Mauerwerk plugin).
- #1 funktioniert bei mir nicht mehr auf den neuesten Firefox (ich sollte update mit einem Spielplatz Beispiel; das tun wird). #2 eigentlich ganz nahe gekommen mit ein paar Macken ausgearbeitet werden, aber ich verstehe es verwendet die neue CSS-grid-system, dass sehr schlechte browser-Unterstützung.
- Du hast Recht, über #1. Ich war nicht in der Lage zu machen, arbeiten mit flex. Nicht sicher, was Sie bedeuten, von "sehr schlechte browser-Unterstützung". Können Sie mir einige zahlen, bitte? Ich denke #2 hat Probleme für weniger als 5% der Benutzer. Korrigieren Sie mich, wenn ich falsch bin.
- Wenn Sie einen Blick auf die Verwendung Relativer Werte, die grid-system ist nicht für eine große Anzahl von Benutzern, so dass es wahrscheinlich nicht die Produktion bereit noch. Es ist eine großartige Lösung, wenn, Dank für, die. caniuse.com/#search=grid
- Faszinierend. Können Sie vor Ort alle Unterschiede zwischen grid und Spalten?
- lol war das sarkastisch gemeint? In jedem Fall, du hast Recht.
InformationsquelleAutor Andrei Gheorghiu

den column Ansatz scheint ein guter Kompromiss, wenn Sie column-width über vmin oder vmax Einheiten und drop column-count (erste snippet) , display:grid und vmin ist auch eine option für die Zukunft (zweite snippet).

snippet inspiriert von @Anti beantworten.

test-demo mit vmin

CSS:

.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;
}

HTML:

<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>

einen link unter anderem https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

display:grid konnten machen es auch einfach mit auto-fill-aber um einen span-Wert auf höchste Bild-also Zeilen und Spalten können inbricate

CSS:

.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
}

HTML:

<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>

können Sie sehen, https://css-tricks.com/snippets/css/complete-guide-grid/

Die Reihenfolge der Bilder in der ersten snippet ist falsch, das ist das problem mit der Anordnung in Spalten. Aber der zweite scheint zu sein, auf den Punkt! Wirklich schön

InformationsquelleAutor G-Cyr

Erreichen Sie das Mauerwerk Effekt wie pro Ihre screenshot, aber du hast die Höhe des äußeren div-dynamisch

CSS:

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%;
}

HTML:

<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>

InformationsquelleAutor David Chelliah

Statt flexbox, empfehle ich die Nutzung Spalten für raster wie dieses. Wie Sie sehen können, der Abstand auf die unteren Bilder können besser sein, aber für eine native CSS-Lösung, die ich denke, es ist Recht ordentlich. Nicht mehr JS:

CSS:

.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;
}

HTML:

<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>

Das sieht gut aus, aber die Reihenfolge der Elemente ist falsch. Der schwierige Teil ist, um das Layout der Elemente horizontal, dann wickeln Sie vertikal.

InformationsquelleAutor Lanti

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Ist es möglich, für flex-Elemente ausrichten, die eng an die Artikel über Sie?

`column wrap` Lösung

Anderen Lösungen

1. flexbox:

2. CSS Spalten

3. Mauerwerk plugin

`column wrap` Lösung

Anderen Lösungen

1. flexbox:

2. CSS Spalten

3. Mauerwerk plugin

column wrap Lösung

Anderen Lösungen

1. flexbox:

2. CSS Spalten

3. Mauerwerk plugin

column wrap Lösung

Anderen Lösungen

1. flexbox:

2. CSS Spalten

3. Mauerwerk plugin

`column wrap` Lösung

`column wrap` Lösung