Flex-Elemente ohne absolute Position neu anordnen

Ich frage mich, ob es eine Möglichkeit gibt, diese Art von Zusammensetzung mit Flex-Box zu erreichen, die die gleiche Struktur (Reihenfolge: Box1, Box2, Box3 und Box4).Flex-Elemente ohne absolute Position neu anordnen

Ich habe dies, aber die box4 wird unter den anderen Boxen nach unten gedrückt: http://codepen.io/anon/pen/xRVEwW

.container{ 
 
    width:600px; 
 
    position:relative; 
 
} 
 
.box1, .box2, .box3, .box4{ 
 
    width: 200px; 
 
} 
 
.box2, .box4{ 
 
    margin:0 auto; 
 
} 
 
.box1{ 
 
    background:pink; 
 
    position:absolute; 
 
    left:0; top:0; 
 
} 
 
.box2{ 
 
    background:lightgreen; 
 
} 
 
.box3{ 
 
    background:lightgrey; 
 
    position:absolute; 
 
    right:0; top:0; 
 
} 
 
.box4{ 
 
    background:lightblue; 
 
}

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
    <div class="box4">Box 4.</div> 
 
</div>

Quelle

2016-11-12 Daniel G. Blázquez

Ich frage mich, ob es eine Möglichkeit ist, diese Art von Zusammensetzung mit Flex-Box hält die gleiche Struktur zu erreichen.

Ja, es gibt eine Möglichkeit, das Layout ohne Änderungen am HTML zu erreichen. Hier gehen Sie:

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    width: 600px; 
 
    height: 500px; 
 
} 
 

 
.box1 { flex: 100%; order: 0; } 
 
.box2 { flex: 80%; order: 1; } 
 
.box3 { flex: 100%; order: 3; } 
 
.box4 { flex: 20%; order: 2; } 
 

 
.box1 { background: pink;  width: 200px; } 
 
.box2 { background:lightgreen; width: 200px; } 
 
.box3 { background:lightgrey; width: 200px; } 
 
.box4 { background:lightblue; width: 200px; }

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
    <div class="box4">Box 4.</div> 
 
</div>

revised codepen

Kernpunkte:

Verwenden Sie eine Spaltenrichtung, Wrap-fähigen flex Container.
Legen Sie eine Höhe für den Container fest (damit die Flex-Elemente wissen, wo sie sich verpacken müssen).
Die erste und dritte Spalte erhalten volle Höhe (flex-basis: 100%, oder Kurzschrift flex: 100%).
zweite und vierte Spalt kombinieren, so dass ihre Höhen nach Bedarf anpassen und order Eigenschaft verwenden, um Spalte 4 vor Spalte zu bewegen 3.

Quelle

2016-11-12 17:40:08

Toller Ansatz! Denkst du, gibt es eine Möglichkeit, dies zu tun, ohne den Höhenwert des Containers anzugeben? –

Das ist eine häufige Anfrage. Ohne die Höhe des Containers gibt es nichts, was die Flex-Elemente zum Umwickeln zwingt. –

Wrap box2 und box4 in einem gemeinsamen div
hinzufügen align-items: flex-start; (oder baseline) bis .container

.container{ 
 
    width:600px; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    align-items: flex-start; 
 
} 
 
.box1, .box2, .box3, .box4{ 
 
    width: 200px; 
 
} 
 
.box1{ 
 
    background:pink; 
 
} 
 
.box2{ 
 
    background:lightgreen; 
 
} 
 
.box3{ 
 
    background:lightgrey; 
 
} 
 
.box4{ 
 
    background:lightblue; 
 
}

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box4">Box 4.</div> 
 
    </div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, 
 
    id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
</div>

http://codepen.io/borkdude/pen/VmaKRZ

Quelle

2016-11-12 15:12:58

Das ist der einfache Weg ist :-) Aber ... kann ich das gleiche erreichen, ohne die Struktur verändern? –

die Biegeeigenschaften löschen und verwenden float:

float:left auf den Feldern 1 und 2, float:right auf den Feldern 3 und 4. Keine HTML Änderung notwendig:

.container{ 
 
    width:600px; 
 
} 
 
.box1, .box2, .box3, .box4{ 
 
    width: 200px; 
 
} 
 
.box1{ 
 
    background:pink; 
 
    float: left; 
 
} 
 
.box2{ 
 
    background:lightgreen; 
 
    float: left; 
 
} 
 
.box3{ 
 
    background:lightgrey; 
 
    float: right; 
 
} 
 
.box4{ 
 
    background:lightblue; 
 
    margin:0 auto; 
 
    float: right; 
 
}

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
    <div class="box4">Box 4.</div> 
 
</div>

http://codepen.io/anon/pen/eBZBYL

Quelle

2016-11-12 15:36:14 Johannes

Wenn Sie den Inhalt der Boxen ändern, funktioniert es nicht. :-(http://codepen.io/anon/pen/yVOgjY –

Ja, aber ich habe auf Ihr Beispiel verwiesen.Wenn Box3 kürzer als Box2 ist, möchten Sie wirklich, dass box4 unter Box2 ist? – Johannes

Flex-Elemente ohne absolute Position neu anordnen

Antwort

Verwandte Themen