Flexbox 等高不起作用答案

【问题标题】：Flexbox equal height doesn't workFlexbox 等高不起作用
【发布时间】：2016-11-20 06:48:53
【问题描述】：

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

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

这是我尝试过的，只要我将display: flex 添加到容器中列出的项目中，它就会全部显示在一行中，而不是堆叠。

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

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

【问题讨论】：

这是你想要的吗？：codepen.io/anon/pen/jAkEay?editors=1100
是的，非常感谢..我只是设法以像素为单位的固定高度得到它..超级奇怪..非常感谢

标签： html css flexbox

【解决方案1】：

当您创建一个弹性容器（display: flex 或display: inline-flex）时，它带有几个默认设置。这里只是一些：

justify-content: flex-start - 弹性项目将堆叠在行首
flex-wrap: nowrap - 弹性项目被强制保留在一行中
flex-shrink: 1 - 弹性项目允许收缩
align-items: stretch - 弹性项目将扩展以覆盖容器的交叉大小
flex-direction: row - 弹性项目将水平对齐

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

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

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

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

Updated codepen

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

【讨论】：