html - flex 元素没有并排对齐(即间隔开)？

Question

好的，使用 flex 并排对齐图像(紫色)和内容(黄色)。但是，我在两者之间获得了额外的空间，并且正在将图像向右抛出。

参见此处:http://imgur.com/a/nl0ZJ

应该是:

• 图像应该在黄色 div 旁边的蓝色 div 内
• 黄色 div 的宽度应为 60%(这些是 flex 元素)

我已经检查了填充和边距，但它对我不起作用。有什么想法吗？

这是html

<div class="sec-1">
    <h2>Introducing 'Keeva' world's smartest assistant.</h2>
    <div class="flex-box">
        <div>
            <p class="sales-copy">Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</p>
                        <!-- Download Buttons -->
                    <img class="download-btns" src="img/playstore-1.png">
                    <img class="download-btns" src="img/iphone-1.png">
        </div>
        <!-- Phone 0 image -->
        <img class="phone-img" src="img/iphone-cut.png" alt="phone image">          
    </div>
</div>

CSS

@media screen and (min-width: 599px) {
    .sec-1 h2 {
        font-size: 1.2em;
        background-color: green;
    }

    .sec-1 p {
        font-size: 1.1em;
        width: 50%;
        background-color: yellow;
    }

    .sec-1 .phone-img {
        position: relative;
        top: 10%;
        left: 30%;
        background-color: purple;

    } 
    .download-btns {
        position: relative;
        right: 25%;
        background-color: orange;
    }

    .sec-1 .sales-copy {
        width: 50%;
    }


    .flex-box {
        display: flex;
           justify-content: flex-end;

    }

}

Answer 1

因为 display:flex 使它的直接后代 flex 元素，所以只有 div 包装了 p/img 变成一个。

因此，为了使其正常工作，并且由于 img 在作为 flex 元素时表现不正常，请将 div 包装器移动到 img它将按预期流动。

我还将 width: 50% 更改为 flex-basis: 60% 因此 yellow 元素变为 60%，并添加了 flex-grow: 1 到 div 包装器，因此它占用剩余空间。

---

根据评论更新

更改为外部和内部 Flexbox 包装器，因此按钮位于黄色 元素下方，图像位于右侧

.sec-1 h2 {
  font-size: 1.2em;
  background-color: green;
}

.sec-1 p {
  margin: 0;
  font-size: 1.1em;
  background-color: yellow;
}

.sec-1 .phone-img {
  position: relative;
  top: 10%;
  left: 30%;
  background-color: purple;
}

.flex-box-outer {
  display: flex;
}
.flex-box-outer > div {
  flex-grow: 1;
}
.flex-box-inner {
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div class="sec-1">
  <h2>Introducing 'Keeva' world's smartest assistant.</h2>
  <div class="flex-box-outer">  
    <div class="flex-box-inner">
      <p class="sales-copy">Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</p>
    <!-- Download Buttons -->
      <div>
        <img class="download-btns" src="http://placehold.it/100x50/?text=playstore">
        <img class="download-btns" src="http://placehold.it/100x50/?text=iphone">
      </div>
    </div>
    
  <!-- Phone 0 image -->
    <div>
      <img class="phone-img" src="http://placehold.it/100x50/?text=iphone cut" alt="phone image">
    </div>
  </div>
</div>