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

因此，在您的图像中，您有一个两列布局：第一列中有两个项目，第三个项目包含第二个项目。

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

您的代码中已有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. Flex Lines

在多线柔性容器（即使只有一条线的容器）中，   每行的交叉大小是包含该行所必需的最小大小   弹线上的项目（由于align-self对齐后）和   使用align-content在flex容器中对齐线条   属性。 在单行Flex容器中，行的交叉大小   是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;。

如果你看一下'基础知识＆amp; amp;在{{3}}中的术语'，您将看到对齐内容与弹性箱的主轴一起播放，并且对齐项与十字轴一起播放。因此，当您的flexbox方向位于列中并且您希望将列水平居中时，您需要在主轴或justify-content属性中对齐它们。

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

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

在flex布局

2 个答案:

jsFiddle