Мне нужно создать макет строки со следующими функциями:
Первый элемент в строке имеет минимальный размер, но расширяется для заполнения любого неиспользуемого пространства.
Существует несколько динамическихэлементы после первого, переменной длины.Они должны совместно использовать одну и ту же строку, пока есть место для нее, но если ее нет, все они должны объединиться в новую строку.
Элемент, который всегда должен быть в правом конце верхней частистрока, независимо от того, перенесены ли динамические элементы в новую строку или нет.
Вот как это может выглядеть при использовании flexbox:
<div id="container">
<div id="start-item">start item</div>
<div id="end-item">end item</div>
<div class="dynamic-items">
<div class="dynamic-item">these</div>
<div class="dynamic-item">are</div>
<div class="dynamic-item">dynamic</div>
<div class="dynamic-item">items</div>
</div>
</div>
CSS:
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.dynamic-items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#start-item {
flex-grow: 1;
}
#end-item {
order: 0; // works for single line
// works for wrapped lines
margin-left: auto;
order: 1;
}
Есть одна проблема, и это то, что я могу получить конечную кнопку только в правильном положении, если она находится после динамических элементов, если строки обернуты, и перед ними, если все находится на одной строке.Вы можете увидеть это, продемонстрированное в этом jsfiddle: http://jsfiddle.net/bgmort/6zkxmrj0/.
Я установил флажок, который переключает порядок - непроверенное состояние дает желаемый результат, если строки не перенесены, а проверенное состояние дает желаемоерезультат, если строки обернуты.
Как я могу заставить это работать для обоих условий?