代码之家 › 专栏 › 技术社区 › RavenHursT

Flexbox项目无法与flex端对齐

flexbox css3 css html

RavenHursT · 技术社区 · 6 年前

想让这个密码笔工作吗/ .inner-wrp 黛芙(深红色)蜷缩在浅蓝色下面 .top-right 部门。

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 .内部wrp ,但它仍在进行中 .left-side

我怎样才能把它移到淡蓝色沙发下面的右边?

2 回复 | 直到 6 年前

Temani Afif 6 年前

您混合了许多属性(flex、inline block、float、vertical align等),这些属性没有用,因为您只需要依赖flexbox属性。你也在使用 vw

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

Obsidian Age 6 年前

<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)