Html Flexbox布局-四个分区和#x2B；全高潜水器

我试图用flex box实现这种布局，但我似乎遇到了一些问题，黑色空间只是一个全高的div

正如你所看到的，这就是它目前的样子

html

我不太确定哪里出了问题，我知道我需要使左手边的div达到全高，但我对如何接近布局有点困惑，我是否使用行和换行，然后调整宽度和最大宽度？还是使用换行的列？非常感谢您的指导。

您应该添加：

justify-content: flex-end;

到您的

.parent容器

，块将定位到视口的右侧

。父容器{
显示：-ms flexbox；
显示器：flex；
证明内容：柔性端；
字号：0；
保证金：0；
填充：0；
边界：0；
-ms-flex-wrap:wrap；
柔性包装：包装；
高度：100vh；
宽度：100vw；
背景色：#000；
}
.child33{
背景颜色：皇家蓝；
边框：1px实心#000；
位置：相对位置；
-ms-flex阳性1例；
柔性生长：1；
身高：50%；
宽度：33.3%；
最大宽度：计算值（100%*（1/3））；
保证金：0；
位置：相对位置；
-ms flex flow：nowrap行；
-o-flex-flow：nowrap行；
柔性流：nowrap行；
}

发展必须

考虑< BR>
零售连接

具有相邻空格

通过关注

与

作为社区的人

有助于做出贡献

位置感由

产生寿命和寿命

动画

主要问题是需要使用

flex-direction:column。我还删除并调整了一些其他属性，最值得注意的是将
cm文本的高度设置为100%


html，正文{
保证金：0；
}
.父容器{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：100vh；
宽度：100vw；
}
.cm-text.33{
身高：100%；
背景：黑色；
颜色：白色；
}
.child33{
身高：50%；
宽度：33.3%；
最大宽度：计算值（100%*（1/3））；
}
.img包装{
身高：100%；
宽度：100%；
背景：无重复中心/盖；
}

发展必须

考虑< BR>
零售连接

具有相邻空格

通过关注

与

作为社区的人

有助于做出贡献

位置感由

产生寿命和寿命

动画
请提供实际有效的代码，以便我们看到问题所在。你自己试过吗。。。因为我不知道单凭这一点就可以解决这个问题，所以如果你能发布一个示例，展示它的外观，那就太好了。你可以在
.child-33
元素和边框中添加背景色。对我来说，这与问题中的第一个图像布局示例完全不同，也许我只是误解了。。。我们很快就会看到，我认为问题在于将图像div定位在视口的右侧，这
justify content:flex end求解；也许我误解了这个问题，这是我试图实现的最简单的修复方法，我添加了justify内容：flex-end；到我的父容器类，并将它们移动到正确的位置。我不知道我怎么会错过这个！回答得很好。在玩了一些游戏之后，我使用了这个方法，如果我尝试使用下面的方法重新定位文本，它会在html文档上由于填充/边距等造成一些黑色空间。。我认为这种方法更有用，因为您建议的列属性非常受欢迎。
.parent-container {
    display: -ms-flexbox;
    display: flex;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100vh;
    width: 100vw;
}

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

justify-content: flex-end;