删除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

您的弹性容器 (.parent-container) 有三个子项（弹性项目）。

每个孩子都有一个班级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; ...">

因此，在您的图像中，您有一个双列布局：第一列中有两个项目，第三个项目环绕形成第二个。

两列分散的原因是弹性容器的初始设置是align-content: stretch。这意味着cross axis 中的多行将均匀分布在整个容器的长度上。

您的代码中已经有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

在多行 flex 容器中（即使只有一行）， 每行的交叉大小是包含 行上的弹性项目（由于align-self而对齐后），以及 行在 flex 容器内与align-content 对齐 财产。 在单行 flex 容器中，行的横向大小 是弹性容器的交叉尺寸，align-content 没有 效果。 一条线的主要尺寸总是和一条线的主要尺寸一样 flex 容器的内容框。

8.4. Packing Flex Lines: the align-content property

align-content 属性对齐 flex 容器的行 当横轴有额外空间时的 flex 容器， 类似于 justify-content 在 主轴。 注意，这个属性对单行 flex 没有影响 容器。

_（强调）

Answer 2

如果我理解正确，您希望两列都居中。由于.parent-container 在您的内联样式中有flex-direction: column;，因此您需要justify-content: center;。

如果您查看CSS-Tricks 中的“基础知识和术语”部分，您会看到 justify-content 与 flexbox 的主轴一起使用，而 align-items 与交叉轴一起使用。因此，当您的 flexbox 方向在列中并且您希望将列水平居中时，您需要将它们与主轴对齐或使用 justify-content 属性。

但如果你想让你的 flexbox 跨浏览器，你需要以下内容：

-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;