在flex布局中删除列之间的间隙

Question

我在使用flexbox布局时遇到了一些麻烦.我想要实现的是下面的图像是如何定位的.但是,使用边距和填充,我可以将元素移动到正确的位置,而不会发生剧烈的事情.

我可能不正确地接近这个.如果有人可以给我一些建议并解释如何正确地做到这一点会很好.

线框

现在怎么样

HTML

<div style="background: grey;">
    <div class="parent-container" style="flex-direction: column; align-items: center; margin: 10px;">
        <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" ng-style="{'background-image':'url(/assets/Aelia_Robot_highres006.jpg)'}"></div>
        </div>
        <div class="child33">
            <div class="img-wrapper" ng-style="{'background-image':'url(/assets/AELIA_IMAGE.jpg)'}"></div>
        </div>
    </div>
</div>

CSS

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

.child33 {
    position: relative;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 50%;
    width: 33.3%;
    max-width: calc(100% * (1/3));
    margin: 0;
    position: relative;
    -ms-flex-flow: nowrap row;
    -o-flex-flow: nowrap row;
    flex-flow: nowrap row;
    border: 0;
    outline: 0;
}

.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;
}

.img-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
}

Answer 1

您的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的代码中已有.但这仅适用于单线柔性容器.当横轴有多条线时,需要使用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.弹性线

在多线柔性容器(即使只有一条线的容器)中,每条线的交叉尺寸是在线上包含柔性项目所需的最小尺寸(在对齐之后align-self),并且线条在flex align-content 属性的容器.在单线柔性容器中,线的十字尺寸是柔性容器的十字尺寸,并且align-content没有效果.行的主要大小始终与Flex容器的内容框的主要大小相同.

8.4.包装Flex Lines:align-content 属性

align-content当横轴上有额外的空间时,属性会在flex容器内对齐flex容器的线,类似于justify-content在主轴内对齐各个项的方式.请注意,此属性对单行Flex容器没有影响.

_{(重点补充)}