Удалить зазор между столбцами в компоновке flex [дубликат]

ваш гибкий контейнер (.parent-container) имеет трех детей (элементы flex).

у каждого ребенка есть класс child33.

контейнер flex имеет значение flex-direction: column и flex-wrap: wrap, что означает, что элементы будут выравниваться по вертикали и обертываться при необходимости, формируя новые столбцы.

.parent-container {
    display: -ms-flexbox;
    display: flex;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 92vh;
    width: 100vw;
}

<div class="parent-container" style="flex-direction: column; align-items: center; ...">

таким образом, в вашем изображении у вас есть макет из двух столбцов: два элемента в первом столбце, а третий элемент обертывается, чтобы сформировать второй.

причина обоих столбцов разбросаны является ли начальная настройка контейнера flex align-content: stretch. Это означает, что несколько строк в оси Креста будет распределено равномерно по всей длине контейнера.

у вас уже есть align-items: center в коде. Но это работает только на одной линии Flex контейнеров. Когда есть несколько линий в поперечной оси, вам нужно использовать align-content.

Итак, переопределите настройку по умолчанию, добавив align-content: center в свой контейнер.

body { margin: 0; }

.parent-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    height: 92vh;
    width: 100vw;
    align-content: center;  /* NEW */
}

.aelia-text {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    color: black;
    font-size: 1.5vw;
    font-family: portland-medium-font;
}

.child33 {
    flex-grow: 1;
    height: 50%;
    width: 33.3%;
    max-width: calc(100% * (1/3));
    margin: 0;
    position: relative;
}

.img-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* added image for demo; original code had relative URI */
    background-image: url(http://i.imgur.com/60PVLis.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

<div style="background: grey;">
    <div class="parent-container">
        <div class="aelia-text child33">
            The first of it's kind, to
            <br/> create a better customer
            <br/> journey with reduced
            <br/> collection waiting time and
            <br/> a special moment that makes
            <br/> even the most jet-lagged
            <br/> shopper smile.
        </div>
        <div class="child33">
            <div class="img-wrapper"></div>
        </div>
        <div class="child33">
            <div class="img-wrapper"></div>
        </div>
    </div>
</div>

jsFiddle

спецификации:

6. Flex Lines

в Multi-line контейнере гибкого трубопровода (даже одном с только одиночной линией), поперечный размер каждой линии минимальный размер, необходимый для flex элементы на линии (после выравнивания из-за align-self), и линии выровнены внутри контейнера flex с align-content свойство. в однолинейном контейнере гибкого трубопровода, поперечный размер линии является поперечным размером контейнера flex и align-content нет эффект. основной размер строки всегда совпадает с основным размером окно содержимого контейнера flex.

8.4. Упаковка гибкий строки:align-content собственность

на align-content свойство выравнивает линии контейнера flex внутри контейнер гибкого трубопровода когда дополнительный космос в крест-оси, подобно тому, как justify-content выравнивает отдельные элементы в пределах главная ось. обратите внимание, что это свойство не влияет на однострочный flex контейнер.

_{(курсив)}