Flexbox не работает должным образом - элементы становятся меньше - PullRequest
Новая
       6

Flexbox не работает должным образом - элементы становятся меньше

0 голосов
/ 21 ноября 2018

У меня возникли проблемы при попытке сделать стабильную сетку 2 x 2.

Идея:
Я хочу иметь сетку иконок, которая всегда остается неизменной, независимо от того, сколько элементов внутри.(макс. 4).

Для этого я создал такой блок: 

<div class="d-inline-flex align-items-center justify-content-start pl-2 flex-wrap">
    <div style="background-color: #00b319; flex: 1 0 50%; " class="order-0 p-1">
        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"
                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>
    </div>
    <div style="background-color: #ff0000; flex: 1 0 50%; " class="order-0 p-1">
        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"
                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>
    </div>
    <div style="background-color: #17a2b8; flex: 0 1 50%; " class="order-0 p-1" v-if="false">
        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"
                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>
    </div>
    <div style="background-color: #00b373; flex: 1 1 45%; " class="order-0 p-1" v-if="false">
        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"
                           class="align-baseline" style="display: block; margin: auto;" v-if="true"></font-awesome-icon>
    </div>
</div>

(не обращайте внимания на теги <font-awesome-icon> - я создаю здесь приложение Vuejs)

Это прекрасно работаеткогда у меня есть 4 предмета внутри.
Но когда я убираю один, весь контейнер сжимается - удаляя другой -> снова сжимается.

4 items 3 items 2 items

Есть ли способ добиться такой сетки вотзывчивый и гибкий способ?

Спасибо!

...