Wie man Elemente in Flexbox vertikal überspannen kann? - html, CSS

Ich entwickle ein Layout mit einem mobilen ersten Ansatz mit sieben Elementen.

Auf einem größeren Bildschirm möchte ich sie anders bestellen, was gut funktioniert.

Aber ist es möglich, ein Element vertikal in einer Reihe flexbox zu überspannen?

Das Element, das ich überspannen möchte, ist Element 6, das eine Höhe haben wird, die stark variieren kann (d. H. Ich möchte Element 6 über Element 2 und 4 überspannen).

Sieh dir diese Geige an http://jsfiddle.net/lellky/tvbrty83/

Dies ist das Containerelement

.product-description {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
}

Und das ist der Code für einen Gegenstand:

.product-description .item-1 {
order: 1;
width: 67%;
background-color: khaki;
}

Antworten:

Ich glaube nicht, dass dies mit der flexbox möglich ist. Man kann Element 4 nur in Element 2 verschachteln.

Ein Workaround wäre, einen negativen Rand auf der Box zu verwenden, die Sie überspannen möchten:

.product-description .item-6 {
background-color: lightsalmon;
margin-bottom: -160px;
}

Du könntest das mit JS so machen:

$(".item-6").css("margin-bottom", $(".item-4").outerHeight() * (-1));

siehe hier: jsfiddle

Aber denken Sie daran, dass Sie dies bei jeder Fenstergrößenänderung tun müssen.