позиционирование двух переменных ширина инлайн-блоки относительно друг друга

Question

У меня есть два элемента переменной ширины, что я пытаюсь расположить следующим образом:

1. Если они подходят рядом друг с другом на экране или в их общем контейнере, я хочу, чтобы они выровнялись с противоположными сторонами (т.е. вторым выравнивали справа).
2. Если они этого не делают, я хочу их один над другим, но оба выровнены влево.

Что-то же просто, как:

<div class="container"> 
    <div style="display: inline-block;"> 
    I'm a variable width left element 
    </div> 
    <div style="display: inline-block; float:right;"> 
    I'm right-floating if there's space 
    </div> 
</div> 

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

Возможно ли это с помощью чистого CSS? Я не могу использовать медиа-запросы из-за неизвестной/переменной ширины.

Answer 1

Этого расположение и поведение возможно без медиа запросов и чистого CSS с помощью flexbox.

HTML

<!-- horizontal alignment when two boxes fit --> 
<div class="container"> 
    <div class="box box1"><span>1</span></div> 
    <div class="box box2"><span>2</span></div> 
</div> 

<!-- vertical alignment when two boxes don't fit --> 
<div class="container"> 
    <div class="box box3"><span>1</span></div> 
    <div class="box box4"><span>2</span></div> 
</div> 

CSS

.container { 
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    width: 700px; /* for demo only; can be relative length, as well */ 
} 

.box1 { width: 100px; } 
.box2 { width: 150px; } 
.box3 { width: 400px; } 
.box4 { width: 500px; } 

DEMO

ПРИМЕЧАНИЯ:

• Когда есть достаточно места, чтобы соответствовать оба элемента переменной ширины на одной и той же строке, что они выровнены на противоположных концах контейнера с justify-content: space-between.

• Когда есть не достаточно места, чтобы соответствовать как элементы, они обертывают с flex-wrap: wrap и выравнивать налево, потому что justify-content: space-between правило покидающий выравнивать элемент, когда он один на строке.

---

Обратите внимание, что Flexbox поддерживается всеми основными браузерами, except IE 8 & 9. Некоторые недавние версии браузера, такие как Safari 8 и IE10, требуют vendor prefixes. Чтобы быстро добавить все префиксы, которые вам нужны, разместите свой CSS на левой панели здесь: Autoprefixer.