flex容器不能平均分配空间，以便flex项目大小相同

I'm having a problem with flexbox displaying properly in a wrapper.

我有一个问题，Flexbox在包装器中正确显示。

In my code below you'll see that the middle .wrap container does not equally distribute space so that the individual flex children are equally sized.

在下面的代码中，您将看到中间.wrap容器不能均匀分配空间，以便各个flex子项的大小相同。

I know I must be doing something wrong. I'd appreciate some guidance.

我知道我一定做错了。我很感激一些指导。

The problem can be found on this page: pennyappealusa.org/hurricanematthew

这个问题可以在这个页面上找到：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>

1 个解决方案

#1

Solution

Instead of this:

而不是这个：

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

Switch all instances of flex-grow: 1 to this:

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

flex: 0 0 50%;

---

Explanation

flex-grow: 1

flex-grow：1

This rule tells a flex item to consume any remaining space in the container.

此规则告诉flex项消耗容器中的任何剩余空间。

But this doesn't definitively size a flex item because the default setting of flex-basis is auto.

但这并不能确定Flex项目的大小，因为flex-basis的默认设置是auto。

With flex-basis: auto a flex item's initial size will be influenced by the length of its content.

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

flex: 0 0 50%

flex：0 0 50％

With the shorthand flex: 0 0 50% a flex item will not expand (flex-grow: 0), not shrink (flex-shrink: 0), and have a width of 50% (flex-basis: 50%).

使用速记flex：0 0 50％flex项不会扩展（flex-grow：0），不收缩（flex-shrink：0），宽度为50％（flex-basis：50％）。

This will force two items per row, each taking half the container size, and aligning evenly with items in other rows at all screen sizes.

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

---

This question illustrates why it's usually better to use the flex shorthand property than individual longhand properties (flex-grow, flex-shrink, flex-basis).

这个问题说明了为什么使用柔性速记属性通常比单个速记属性（柔性生长，柔性收缩，柔性基础）更好。

By using the shorthand you can define all three properties, thus overriding initial values as necessary.

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

From the specification:

从规格：

7.2. Components of Flexibility

7.2。灵活性的组成部分

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

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