Flexbox 等高不起作用

我正在尝试将 flexbox 与 susy 一起使用，但不知何故它不起作用。

我尝试了我在这里找到的所有问题，但它总是会中断，并且文本容器和图像容器不能保持相同的高度，移动视图从 38 em 开始工作，但不能。

这就是我尝试过的，一旦我添加display: flex对于容器中列出的项目，它全部显示在一行中，而不是堆叠在一起。

我还想我必须使用图像显示框......

http://codepen.io/HendrikEng/pen/wWyBGv http://codepen.io/HendrikEng/pen/wWyBGv

<div class="l-wrap-page">
    <!-- Start Main Content Wrapper -->
    <div class="l-wrap-main">
        <!--  Start Quote -->
        <div class="c-quote">
            <h2 class="c-quote__title">Quote</h2>
            <div class="c-quote__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <button class"o-btn">mehr</button>
        </div>
        <!-- End Quote -->
        <!-- Start Content Block -->
        <div class="c-block">
            <div class="c-block__item">
                <div class="o-media">
                    <img src="http://dummyimage.com/650x325/000/fff" alt="">
                </div>
            </div>
            <div class="c-block__item">
                <div class="c-block-article">
                    <h3 class="c-block-article__title">Headline</h3>
                    <div class="c-block-article__content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <button class"o-btn">mehr</button>
                    </div>
                </div>
            </div>
            <div class="c-block__item">
                <div class="o-media">
                    <img src="http://dummyimage.com/650x325/000/fff" alt="">
                </div>
            </div>
            <div class="c-block__item">
                <div class="c-block-article">
                    <h3 class="c-block-article__title">Headline</h3>
                    <div class="c-block-article__content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <button class"o-btn">mehr</button>
                    </div>
                </div>
            </div>
            <div class="c-block__item">
                <div class="o-media">
                    <img src="http://dummyimage.com/650x325/000/fff" alt="">
                </div>
            </div>
            <div class="c-block__item">
                <div class="c-block-article">
                    <h3 class="c-block-article__title">Headline</h3>
                    <div class="c-block-article__content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <button class"o-btn">mehr</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Content Block -->
    </div>

CSS:

*, *:before, *:after {
  box-sizing: border-box;
}

.l-wrap-page {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: -owg-linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-image: -webkit-linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-size: 50%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.l-wrap-page:after {
  content: " ";
  display: block;
  clear: both;
}

.l-wrap-main {
  width: 100%;
  float: left;
}

.c-quote {
  width: 100%;
  float: left;
}

.c-block {
  width: 100%;
  float: left;
}

.c-block:after {
  clear: both;
  content: '';
  display: table;
}

.c-block__item {
  width: 100%;
  float: left;
}

.c-block__item:last-child {
  float: right;
}


@media (min-width: 39.8em) {
  .l-wrap-main {
    width: 100%;
    float: left;
  }
  .c-quote {
    width: 100%;
    float: left;
  }
  .c-block {
    width: 100%;
    float: left;
  }
  .c-block:after {
    clear: both;
    content: '';
    display: table;
  }
  .c-block__item:nth-child(1), .c-block__item:nth-child(5) {
    width: 50%;
    float: left;
    background: rgba(248, 208, 220, 0.5);
  }
  .c-block__item:nth-child(3), .c-block__item:nth-child(8) {
    width: 50%;
    float: right;
    background: rgba(248, 208, 220, 0.5);
  }
  .c-block__item:nth-child(2), .c-block__item:nth-child(6) {
    width: 50%;
    float: right;
    background: rgba(248, 250, 251, 0.5);
  }
  .c-block__item:nth-child(4), .c-block__item:nth-child(8) {
    width: 50%;
    float: left;
    background: rgba(248, 250, 251, 0.5);
  }
  .c-block__item:last-child {
    float: right;
  }

}


h2 {
  font-size: 48px;
}

h2.o-headline {
  text-align: center;
}

.c-block__item img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: block;
  width: 100%;
}

.l-wrap-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-block {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

当您创建 Flex 容器时（display: flex or display: inline-flex），它带有几个默认设置。这里仅仅是少数：

• justify-content: flex-start- 弹性项目将堆叠在行的开头
• flex-wrap: nowrap- 弹性项目被迫保持在一行中
• flex-shrink: 1- 弹性项目允许收缩
• align-items: stretch- 弹性项目将扩展以覆盖容器的横截面尺寸
• flex-direction: row- 弹性项目将水平对齐

请注意最后的设置。如果您希望 Flex 项目垂直堆叠，请使用以下命令覆盖此默认设置（在容器上）flex-direction: column.

或者，您可以打开换行（flex-wrap: wrap）并为每个项目提供足够的宽度以将其强制到下一行。例如，width: 100%在每个项目上，wrap在容器上，可以创建单列的弹性项目。

有关 Flex 等高列的更多信息，请参阅：

• 带 Flexbox 的等高列 https://stackoverflow.com/a/33815389/3597276
• 弹性容器中的等高行 https://stackoverflow.com/q/36004926/3597276

在这种情况下，请尝试更新.c-block像这样规则

更新了代码笔 http://codepen.io/anon/pen/jAkEay?editors=1100

.c-block {
  display: flex;            /*  added property  */
  flex-wrap: wrap;          /*  added property  */
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}