Flexbox项目无法与Flex-End对齐

Question

尝试使.inner-wrp div（深红色）插入浅蓝色.top-right div下使该代码笔正常工作。

https://codepen.io/Troop4Christ/pen/oPwqGV

.purple {
  background: purple;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.darkred {
  background: darkred;
}

.lightbrown {
  background: lightbrown;
}

.orange {
  background: orange;
}

.outer-wrp {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.outer-wrp .left-side {
  height: 100%;
  width: 500px;
  display: inline-block;
}
.outer-wrp .top-right {
  width: calc(100vw - 500px);
  vertical-align: top;
  display: inline-block;
  height: 90px;
}
.outer-wrp .inner-wrp {
  width: calc(100% - 500px);
  display: block;
  height: calc(100% - 90px);
  float: right;
}
.outer-wrp .inner-wrp .inner-left {
  display: inline-block;
  width: calc(100% - 200px);
  height: 100%;
}

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right lightblue"></div>
  <div class="inner-wrp darkred">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
    </div>
  </div>
</div>

我在align-self: flex-end上有.inner-wrp，但是它仍然在绿色的.left-side格下。

如何使它在浅蓝色div下向右移动？

Answer 1

如果我正确理解了所需的输出，则需要为红色和蓝色容器创建一个容器<div>，并为其提供以下内容：

display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: 100%;
width: 50%;

可以看到 here 。

并在以下内容中进行编译：

.purple {
  background: purple;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.darkred {
  background: darkred;
}

.brown {
  background: brown;
}

.orange {
  background: orange;
}

.outer-wrp {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.outer-wrp .left-side {
  height: 100%;
  width: 500px;
  display: inline-block;
}

.outer-wrp .top-right {
  width: calc(100vw - 500px);
  vertical-align: top;
  display: inline-block;
  height: 90px;
}

.outer-wrp .inner-wrp {
  width: calc(100% - 500px);
  display: block;
  height: calc(100% - 90px);
  float: right;
}

.outer-wrp .inner-wrp .inner-left {
  display: inline-block;
  width: calc(100% - 200px);
  height: 100%;
}

.blue-red {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 100%;
  width: 50%;
}

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right lightblue"></div>
  <div class="inner-wrp darkred">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
  </div>
</div>

您可能需要将.outer-wrp .inner-wrp更新为calc(100vw - 500px)，或者从这里稍作修改以适应您的需求。

Answer 2

您正在混合很多属性（flex，inline-block，float，vertical-align等），这是无用的，因为您只需要依赖flexbox属性。您还使用了vw单位，该单位不好，因为它包含滚动条的宽度，并且在滚动时可能会导致不良行为（请改用100％）。然后，您可以使用列方向而不是行方向来完成所需的操作：

.purple {
  background: purple;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.darkred {
  background: darkred;
}

.lightbrown {
  background: lightbrown;
}

.orange {
  background: orange;
}

.outer-wrp {
  height: 100vh;
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;
}

.outer-wrp .left-side {
  height: 100%;
  width: 500px;
}

.outer-wrp .top-right {
  width: calc(100% - 500px);
  height: 90px;
}

.outer-wrp .inner-wrp {
  width: calc(100% - 500px);
  height: calc(100% - 90px);
  display:flex;
}

.outer-wrp .inner-wrp .inner-right {
  width: 200px;
}
.outer-wrp .inner-wrp .inner-left {
  width: calc(100% - 200px);
}

body {
 margin:0;
}

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right lightblue"></div>
  <div class="inner-wrp darkred">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
  </div>
</div>