弹性容器没有平均分配空间，因此弹性项目的大小相同

Question

我在包装器中正确显示 flexbox 时遇到问题。

在我下面的代码中，您会看到中间的 .wrap 容器没有平均分配空间，因此各个 flex 子项的大小相同。

我知道我一定做错了什么。不胜感激。

问题可以在这个页面找到：pennyappealusa.org/hurricanematthew

.wrap {
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.info {
  width: auto;
  min-height: 500px;
  color: white;
  text-align: center;
  display: flex;
  position: relative;
}
.info-white {
  width: auto;
  min-height: 500px;
  background: white;
  display: flex;
  position: relative;
}
.item-1 {
  order: 1;
  flex-grow: 1;
}
.item-2 {
  order: 2;
  flex-grow: 1;
}
.item-3 {
  order: 3;
  flex-grow: 1;
}
.item-4 {
  order: 4;
  flex-grow: 1;
}
.item-5 {
  order: 5;
  flex-grow: 1;
}
.item-6 {
  order: 6;
  flex-grow: 1;
}
.callout {
  width: 80%;
  max-width: 380px;
  height: 80%;
  position: relative;
  background: none;
  margin: auto;
}
.cta {
  padding: 3.5em 1.5em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex: initial;
  flex: initial;
  flex-basis:
}

<div class="flex-container">
  <div class="wrap" style="background-image: url('http://pennyappealusa.org/wp-content/uploads/2016/10/Flickr_-_DVIDSHUB_-_USS_Iwo_Jima_assists_Haiti_after_Hurricane_Tomas_Image_1_of_7.jpg'); background-size: cover; background-position: 70% 30%;">
    <div class="info item-1">
      <div class="callout flex">
        <h3><strong><span style="color: #ffffff; text-shadow: #404040 0px 0px 13px;">Hurricane Matthew is the worst hurricane to make landfall since Hurricane Charley in 2004.</span></strong></h3>
      </div>
    </div>
    <div class="info-white item-2">
      <div class="callout flex">
        <h3><span style="color: #000000;"><strong>Your relief contribution today will make Haiti's ongoing development efforts possible.</strong></span></h3>
        With a nationwide unemployment rate over 40%, natural disasters like Hurricane Matthew<strong> threaten development efforts and thrust individuals and families back into a cycle of poverty.</strong> By providing relief to the victims of Hurricane
        Matthew, we can sustain long-term development projects to help individuals recover their lives.

        <a href="http://launchgood.com/hurricanematthew">
          <button class="btn" style="background-color: #f16521;">Donate Now</button>
        </a>

      </div>
    </div>
  </div>
  <div class="wrap" style="flex-direction: row-reverse;">
    <div class="info-white item-4">
      <div class="callout flex">
        <h3><strong>"There are coastal communities that are under water..." - Jacqueline Charles, Miami Herald</strong></h3>
        2 million people have been advised to evacuate across coastal areas of Florida, Georgia, and South Carolina. Though the hurricane has now been classified as a Category 2, devastating storm surges are expected in the Caribbean and along the southeastern
        United States. We're working with local organizations to do a needs-assessment and provide relief.

        <a href="http://launchgood.com/hurricanematthew">
          <button class="btn" style="background-color: #f16521;">Donate Now</button>
        </a>

      </div>
    </div>
    <div class="info item-3" style="background-image: url('http://i.cdn.turner.com/cnn/interactive/weather/hurricane.tracker/Matthew/Matthew_3DSAT.jpg'); background-size: cover; background-position: 0% 0%;"></div>
  </div>
  <div class="wrap">
    <div class="info item-5" style="background-image: url('http://pennyappealusa.org/wp-content/uploads/2016/10/Hurricane_Matthew_Haiti.jpg'); background-size: cover; background-position: 80% 10%;">
      <div class="gradient" style="position: absolute; width: 100%; height: 100%;"></div>
      <div style="font-size: 12px; color: white; text-shadow: #404040 0px 0px 13px; position: absolute; bottom: 10px; left: 10px;">HECTOR RETAMAL/AFP/Getty Images</div>
      <div class="callout flex">
        <h3><strong><span style="color: #ffffff; text-shadow: #404040 0px 0px 13px;">As an organization, we have already committed funds to assist victims of Hurricane Matthew. Your help is crucial right now.</span></strong></h3>
      </div>
    </div>
    <div class="info-white item-6">
      <div class="callout flex">
        <h3><strong>The global Penny Appeal family has been responding to emergencies since 2009. We're counting on you to help us again.</strong></h3>
        Penny Appeal USA is working with partners on the ground in order to respond to this tragic hurricane in the most effective and impactful way possible. All funds will be used to provide essential assistance in the form of food, water and shelter to help
        the victims rebuild their lives.

        <a href="http://launchgood.com/hurricanematthew">
          <button class="btn" style="width: 225px; background-color: #f16521;">Donate Now</button>
        </a>

      </div>
    </div>
  </div>
</div>

Answer 1

解决方案

而不是这个：

.item-1 {
  order: 1;
  flex-grow: 1;
}

.item-2 {
  order: 2;
  flex-grow: 1;
}

.item-3 {
  order: 3;
  flex-grow: 1;
}

.item-4 {
  order: 4;
  flex-grow: 1;
}

.item-5 {
  order: 5;
  flex-grow: 1;
}

.item-6 {
  order: 6;
  flex-grow: 1;
}

将flex-grow: 1 的所有实例切换到此：

flex: 0 0 50%;

---

说明

flex-grow: 1

这条规则告诉弹性项目消耗容器中的任何剩余空间。

但这并没有明确调整弹性项目的大小，因为flex-basis 的默认设置是auto。

使用flex-basis: auto，弹性项目的初始大小将受其内容长度的影响。

flex: 0 0 50%

使用简写 flex: 0 0 50%，弹性项目不会扩展 (flex-grow: 0)，不会收缩 (flex-shrink: 0)，宽度为 50% (flex-basis: 50%)。

这将强制每行有两个项目，每个项目占容器大小的一半，并在所有屏幕尺寸下与其他行中的项目均匀对齐。

---

这个问题说明了为什么使用flex 速记属性通常比使用单个速记属性（flex-grow、flex-shrink、flex-basis）更好。

通过使用简写，您可以定义所有三个属性，从而根据需要覆盖初始值。

来自规范：

7.2. Components of Flexibility

鼓励作者使用flex 控制灵活性 速记而不是直接使用其速记属性，因为 速记正确地重置任何未指定的组件以适应 common uses.