Flexbox相同的高度不起作用

时间：2016-07-17 16:43:30

标签： html css css3 flexbox

我试图将flexbox与susy一起使用，但不知怎的，它不会起作用。

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

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

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

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

1 个答案:

答案 0 :(得分：3)

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

  • justify-content: flex-start - 弹出项目将叠加在行的开头
  • flex-wrap: nowrap - Flex项目被强制保留在一行
  • flex-shrink: 1 - 允许灵活项目缩小
  • align-items: stretch - flex项目将展开以涵盖容器的交叉大小
  • flex-direction: row - 弹性项目将水平对齐

请注意最后的设置。如果您希望Flex项目垂直堆叠，请使用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;
}
相关问题
最新问题