Question

更新

对于那些不喜欢内联CSS并想要课程的人，这里有另外一个jsFiddle，包含类和样式表。

更新结束

我想制作产品页面。它将有三列。第一个是图片，第二个是规格，第三个是＆＃34;进入篮子＆＃34;。所有列内容都是动态的，所以我永远不会知道，更高的是什么，以及它的大小。

我尝试做的是：

将所有三列高度作为最高柱的高度。
在第二列中，我需要在盒子顶部的产品规格（现在是lorem ipsum），以及盒子底部的一些信息。（123456）。

所以，我使用flexbox technique创建了三列，并且正如我预期的那样。（因为这将是响应，后来我需要更改指定宽度上的3列的顺序，但现在不相关）。

好吧，我想，如果我把另一个flex div放到第二列，但现在使用列模式，它将完成这项工作。

但不是。我不明白，为什么第二列第二个弹性框高度不高于列，（我很伤心strech和justify-content: space-between）

我也应该为第3栏做这件事。

我使用了内联样式表，也许它是可读的。

它仅适用于FF和IE，但不适用于Opera和Chrome。

<!DOCTYPE html>
<html>
    <head>
        <title>Flex teszt</title>
        <style>
            p {margin-bottom: 17px;}
        </style>
    </head>
    <body style="padding: 0; margin: 0;">
                    <!-- Big and first flex container -->
        <div style="width: 1000px; margin: 0 auto; border: 1px solid #000; box-sizing: border-box;">
            <div style="display: flex; flex-wrap: nowrap; justify-content: space-between ; flex-direction: row; align-items: stretch; width: 100%; box-sizing: border-box; border: 1px solid #f00">
                <div style="width: 32%; box-sizing: border-box; order: 1; border: 1px solid #f00;">
                    <img src="http://vaso.hu/venus.jpg" style="width: 100%;" alt="">
                </div>

                <div style="width: 32%; box-sizing: border-box; order: 2; border: 1px solid #0f0; box-sizing: border-box;">
                    <div style="height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between;  width: 100%; box-sizing: border-box;">
                        <div style="border: 1px solid #00f; width: 100%; order: 1" >
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        </div>
                        <div style="border: 1px solid #00f; width: 100%; aling-self: flex-end; box-sizing: border-box; display: block; order: 2">123456</div>
                    </div>
                </div>

                <div style="width: 32%; box-sizing: border-box; order: 3; border: 1px solid #f0f; box-sizing: border-box;">
                    789
                </div>
            </div>
            <!-- /big and first flex container -->
        </div>
    </body>
</html>

以下是 jFiddle 链接。

有人可以帮我吗？

Answer 1

从height: 100%;移除.secondCol .innerFlex，其容器没有设置高度，因此浏览器不知道应该有多高100％
添加display: flex; .secondCol这将允许.innerFlex填充其可用高度

body {
  padding: 0;
  margin: 0;
}
p {
  margin-bottom: 17px;
}
.wrapper {
  width: 1000px;
  margin: 0 auto;
  border: 1px solid #000;
  box-sizing: border-box;
}
.flexContainer {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #f00
}
.firstCol {
  width: 32%;
  box-sizing: border-box;
  order: 1;
  border: 1px solid #f00;
}
.secondCol {
  display: flex; /*Add this*/
  width: 32%;
  box-sizing: border-box;
  order: 2;
  border: 1px solid #0f0;
  box-sizing: border-box;
}
.secondCol .innerFlex {
  /*height: 100%; Remove this*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
.secondCol .innerFlex .firstItem {
  border: 1px solid #00f;
  width: 100%;
  order: 1
}
.secondCol .innerFlex .secondItem {
  border: 1px solid #00f;
  width: 100%;
  aling-self: flex-end;
  box-sizing: border-box;
  display: block;
  order: 2
}
.thirdCol {
  width: 32%;
  box-sizing: border-box;
  order: 3;
  border: 1px solid #f0f;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="flexContainer">
    <div class="firstCol">
      <img src="http://vaso.hu/venus.jpg" style="width: 100%;" alt="">
    </div>

    <div class="secondCol">
      <div class="innerFlex">
        <div class="firstItem">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
        <div class="secondItem">123456</div>
      </div>
    </div>

    <div class="thirdCol">
      789
    </div>
  </div>
  <!-- /big and first flex container -->
</div>

柔性盒中的柔性盒，定位不起作用。（Flexbox中的Flexbox）

1 个答案:

柔性盒中的柔性盒，定位不起作用。 （Flexbox中的Flexbox）

1 个答案:

柔性盒中的柔性盒，定位不起作用。（Flexbox中的Flexbox）