Как я могу прикрепить элемент в верхнем ряду (справа) потока flexbox и по-прежнему позволять элементам течь сразу под ним, когда он существует?

Question

Фон

Мне было поручено изменить наш CSS с абсолютным позиционированием, чтобы использовать flex-box, чтобы когда определенный div (в настоящее время находящийся в верхнем правом углу блока, в котором он находится) не отображался рядом с ним (в настоящее время расположен сверху блок, в котором он находится справа от ширины другого блока) будет перетекать к краю.

Это самая легкая часть.

Проблема

Проблема в том, что блок, который в данный момент находится в верхнем правом углу, должен оставаться там, а другой блок должен располагаться ниже него.

Скорее всего, два блока не изменят размер, но третий элемент (красный) - это изображение, которое изменяется при различных обстоятельствах и не может быть гарантированно определенного размера.

Прикрепленный блок присутствует:

закрепленный блок отсутствует:

Утерянный код

Негибкий эквивалент

Мне удалось воспроизвести эту функцию без flexbox

HTML

<div class="parent">
    <div class="lefty">

    </div>
    <div class="flexy">
        <div class="righty">

        </div>
        <div class="droppy">

        </div>
    </div>
</div>

CSS

.parent{
}

.lefty{
    width:200px;
    height:200px;
    background-color:#ff0000;
    float:left;
}

.droppy{
    float:right;
    width:175px;
    height:100px;
    background-color:#00ff00;
    margin-top:50px;
    margin-right:25px;
}

.righty{
    width:200px;
    height:200px;
    background-color:#0000ff;
    float:right;
    display
}

горе Flexbox

Мне не удалось понять, как выглядит flexbox , как если бы я использовал flex, крайний правый элемент стекает вниз, и если у меня есть отдельный родительский элемент flex div, то он либо не будет перетекать непосредственно под крайний правый элемент, либо переместит весь родительский элемент flex на следующую строку, либо заклинит область flex до минимального размера.

HTML

<div class="parent">
    <div class="lefty">

    </div>
    <div class="spacer">

    </div>
    <div class="droppy">

    </div>
    <div class="righty">

    </div>
</div>

CSS

.parent{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items:center;
}

.lefty{
    flex-grow:0;
    flex-shrink:0;
    width:200px;
    height:200px;
    background-color:#ff0000;
}

.spacer{
    flex-grow:1;
    flex-shrink:1;
}

.droppy{
    flex-grow:0;
    flex-shrink:0;
    width:175px;
    height:100px;
    background-color:#00ff00;
    margin-left: auto;
    margin-right:25px;
}

.righty{
    flex-grow:0;
    flex-shrink:0;
    width:200px;
    height:200px;
    background-color:#0000ff;
    margin-left: auto;
}

Answer 1

попробуйте использовать свойство order для гибких элементов: измените размер экрана до меньшей ширины, чтобы увидеть изменения!

*{
margin:0;
  padding:0;
}
.parent{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items:center;
}

.lefty{
    flex-grow:0;
    flex-shrink:0;
    width:200px;
    height:200px;
    background-color:#ff0000;
}

.spacer{
    flex-grow:1;
    flex-shrink:1;
}

.droppy{
    flex-grow:0;
    flex-shrink:0;
    width:175px;
    height:100px;
    background-color:#00ff00;
    margin-left: auto;
    margin-right:25px;
}

.righty{
    flex-grow:0;
    flex-shrink:0;
    width:200px;
    height:200px;
    background-color:#0000ff;
    margin-left: auto;
}
@media(max-width:600px){
  .droppy{
order:4;
  margin-top:10px;
  margin-right:0;}
}

<div class="parent">
    <div class="lefty">

    </div>
    <div class="spacer">

    </div>
    <div class="droppy">

    </div>
    <div class="righty">

    </div>
</div>