Flex Wrap: Wrap, die Ränder unter einer Reihe von Div

-3

http://tsuts.tskoli.is/2t/2809984199/skapalon/ < - Hosted Here.Flex Wrap: Wrap, die Ränder unter einer Reihe von Div

Die Klassen Container und Projectskort sind die, die betrachtet werden sollen.

.container{ 
display: flex; 
min-height: 100vh; 
width: calc(100vw - 500px); 
flex-wrap: wrap; 
justify-content: space-between; 
margin: 0 auto; 
} 
.projectskort{ 
margin-top: 10px; 
width: 224px; 
height: 270px; 
border-radius: 3px; 
background-color: white; 
}

Jede Hilfe ist sehr verpflichtet, Danke.

Quelle

2016-04-05 Sólon Örn Sævarsson

Fragen, die Code-Hilfe suchen, müssen den kürzesten Code enthalten, der für die Reproduktion ** in der Frage selbst erforderlich ist **. Obwohl Sie einen [** Link zu einem Beispiel oder einer Site ** angegeben haben] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work- can-i-just-einfügen-a-link-to-it), sollte die Verknüpfung ungültig werden, würde Ihre Frage keinen Wert für andere zukünftige SO-Benutzer mit dem gleichen Problem haben. –

Dies ist aufgrund der align-content Standard stretch, die die Linien über die gesamte Höhe des Abschnitts verteilt. Sie müssen das auf flex-start

.container { 
    display: flex; 
    min-height: 100vh; 
    width: calc(100vw - 500px); 
    flex-wrap: wrap; 
    justify-content: space-between; 
    margin: 0 auto; 
    align-content: flex-start; 
}

Quelle

2016-04-05 13:41:44

Funktioniert jetzt. Habe den Flex noch nicht ganz erreicht, Danke! –

Die Ränder Sie sich beziehen erstellt werden, weil Ihre flex eine harte geschriebene Höhe auf sich.

Sie zwingen den Flex, 100vh zu füllen, und mit 2 Zeilen Inhalt füllt jeder 50% davon.

Wenn Sie weitere divs für eine dritte Zeile hinzufügen, werden sie alle 33% der Containerhöhe einnehmen.

Um zu versuchen und zu replizieren, was Sie wollen, entfernen Sie die Mindesthöhe aus Ihrem Flex-Container, legen Sie Ihren Flex-Container in einen Verpackungsbehälter mit min-Höhe 100vh.

Quelle

2016-04-05 13:45:41

Flex Wrap: Wrap, die Ränder unter einer Reihe von Div

Antwort

Verwandte Themen