弹性项目没有并排对齐（即间隔开）？

Question

好的，使用 flex 将图像（紫色）和内容（黄色）并排对齐。但是，我在两者之间获得了额外的空间，并且正在将图像扔到右侧。

请看这里：http://imgur.com/a/nl0ZJ

应该是这样的：

• 图像应该在黄色 div 旁边的蓝色 div 内
• 黄色 div 的宽度应为 60%（这些是弹性项目）

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

这里是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 在作为弹性项目时表现不正常，请将 div 包装器移动到 img ，它会按预期流动。

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

---

根据评论更新

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

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