Изменение выравнивания divs, когда они проходят друг против друга

Question

Мне интересно, есть ли способ с чистым скрещиванием, когда divs изменяют выравнивание, когда они проходят мимо друг друга или «обертываются», когда изменяется окно. Два divs в одной строке, один плавал, оставил другой плавающий справа. На небольших видовых экранах они складываются, но сохраняют левое и правое выравнивание. Я могу сосредоточить их на медиа-запросе, таком как эта скрипка: https://jsfiddle.net/vrac/gcuekarx/, но медиа-запрос не идеален, потому что содержимое в левом поле имеет переменную длину и, таким образом, установка точки останова для медиа-запроса - это только предположение. Приветствия

Html:

<div id="nav_row"> 
    <div id="left_box">Left box with variable content width xxxxxxxxxxxxx 
    </div> 
    <div id="right_box">Right box 

    </div> 
</div> 

CSS:

#nav_row { 
    background: blue; 
    display: table; 
    width: 100%; 
    position: relative; 
} 

#left_box { 
    background: red; 
    display: block; 
    float: left; 
} 

#right_box { 
    background: green; 
    display: block; 
    text-align: right; 
    float: right; 
} 

Медиа запрос:

@media (min-width: 250px) and (max-width: 400px) { 
    #nav_row { 
    background: yellow; 
    } 
    #left_box { 
    background: purple; 
    float: none; 
    text-align: center; 
    } 
    #right_box { 
    background: teal; 
    float: none; 
    text-align: center; 
    } 
} 

Answer 1

На мой взгляд, самый простой способ изменить выравнивание заключается в использовании

Flexbox

Это так легко изменить 'обертку' с помощью Flex-обертку.

Вы можете увидеть здесь https://css-tricks.com/snippets/css/a-guide-to-flexbox/