Question

我试图添加justify-content: space-between;，因此两个flex元素之间的空间相等。

请注意，两个项目中的红色div都被卡住了。没有空间 320px屏幕之间的大小：http://imgur.com/a/QAYcy
同样，在856px屏幕中，没有分配空间， http://imgur.com/a/y0iBp
现在在1364px屏幕中正在分发空间，http://imgur.com/a/05tsj

我正在尝试使用justify-content: space-between;

分配空间

有什么想法吗？

＆＃13;

/* SECTION THREE */
.sec-3 {
  background-color: #f1eeee;
  margin-top: -22px;
}

.sec-3-flex {
  background-color: red;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-around;
}

.sec-3-flex #iphone-2-img {
  padding-top: 30px;
  background-color: orange;
  margin-right: -10%;
}

.sec-3-flex .sales-copy-wrap {
  background-color: yellow;
}

#iphone-sec-3 {}

＆＃13;

<div class="sec-3">
  <!-- iphone image  -->
  <div class="sec-3-flex">
    <!-- Iphone 1 image -->
    <picture id="iphone-sec-3">
      <!-- <source media="(min-width: 320px)" srcset="img/mobile/mobile-iphone-1.jpg"> -->
      <source media="(min-width: 320px)" srcset="img/desktop/images/home_11.jpg">
      <img id="iphone-2-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:50%">
    </picture>
    <div class="sales-copy-wrap">
      <h3>Get organized with events, tasks and notes.</h3>
      <p class="sales-copy">Now more then ever it is critical for smart professionals to stay up to date with important deadlines.</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

图像不是弹性项目。它是弹性项目的子级（picture）。

因此，在此弹性项目中，图像（自然地）与左侧对齐。

将此添加到您的代码中：

picture {
   text-align: right;
}

flex-items空间不在小屏幕中分发

1 个答案: