Html Flex box中的Flex box，定位不起作用。（Flexbox中的Flexbox）_Html_Css_Flexbox

Html Flex box中的Flex box，定位不起作用。（Flexbox中的Flexbox）

html css

Html Flex box中的Flex box，定位不起作用。（Flexbox中的Flexbox）,html,css,flexbox,Html,Css,Flexbox,更新对于那些不喜欢内联CSS并且想要类的人，这里有另一个带有类和样式表的更新结束我想做一个产品页面。它将有三列。第一个是图片，第二个是一些规格，第三个是“入篮”。所有的栏目内容都是动态的，所以我永远不知道，高的是什么，高的是多少我想做的是：将所有三根立柱的高度作为最高立柱的高度在第二列中，我需要在框的顶部显示产品的规格（现在是lorem ipsum），在框的底部显示一些信息。（123456）因此，我用flexbox技术制作了三个专栏，正如我预期的那样，它工作正常。（因为这将是

更新

对于那些不喜欢内联CSS并且想要类的人，这里有另一个带有类和样式表的

更新结束

我想做一个产品页面。它将有三列。第一个是图片，第二个是一些规格，第三个是“入篮”。所有的栏目内容都是动态的，所以我永远不知道，高的是什么，高的是多少

我想做的是：

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

因此，我用flexbox

技术制作了三个专栏，正如我预期的那样，它工作正常。（因为这将是响应性的，稍后我需要更改指定宽度上3列的顺序，但现在不相关）
好的，我想，如果我在第二列中放入另一个flex
div，但现在使用列模式，它将完成这项工作
但不是。我不明白，为什么第二列第二个弹性体框的高度不如该列高，（我说，strech
，和justify content:space-between
）
我也应该为第三栏写
我使用了内联样式表，也许它是可读的
它只适用于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>


Flex teszt
p{页边距底部：17px；}
Lorem ipsum dolor sit amet，是一位杰出的献身者。
123456
789

这是链接
有人能帮我吗？

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


正文{
填充：0；
保证金：0；
}
p{
边缘底部：17px；
}
.包装纸{
宽度：1000px；
保证金：0自动；
边框：1px实心#000；
框大小：边框框；
}
.flexContainer{
显示器：flex；
柔性包装：nowrap；
证明内容：之间的空间；
弯曲方向：行；
对齐项目：拉伸；
宽度：100%；
框大小：边框框；
边框：1px实心#f00
}
firstCol先生{
宽度：32%；
框大小：边框框；
顺序：1；
边框：1px实心#f00；
}
第二上校{
显示：flex；/*添加此*/
宽度：32%；
框大小：边框框；
顺序：2；
边框：1px实心#0f0；
框大小：边框框；
}
.secondCol.innerFlex{
/*高度：100%；移除此*/
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：拉伸；
证明内容：之间的空间；
宽度：100%；
框大小：边框框；
}
.secondCol.innerFlex.firstItem{
边框：1px实心#00f；
宽度：100%；
订单：1
}
.secondCol.innerFlex.secondItem{
边框：1px实心#00f；
宽度：100%；
自：柔性端；
框大小：边框框；
显示：块；
订单：2
}
蒂德科尔先生{
宽度：32%；
框大小：边框框；
顺序：3；
边框：1px实心#f0f；
框大小：边框框；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
123456
789
我很想帮助您，但我无法阅读您的代码，因为目前很难看到什么样式适用于什么标记（html），因为您不使用任何类。你能用CSS样式表发布你的代码吗？我已经更新了我的问题，所以在问题的顶部，有另一个JSFIDLE链接，有类，没有内联样式。谢谢你的否决票！很好，没有任何解释。谢谢你的快速回复+1，因为它在这里确实有效。现在我尝试在我的环境中实现它，如果它有效，我将接受它。如果没有，我会回来问。再次感谢。它很有魅力，再次感谢你。我吸了两天半。没问题，很高兴我能帮上忙。还有一个简单的问题。在secondItem
中，123456
如何与底部对齐？尝试了align self:flex-end
，但没有帮助。啊，是的，有一个小的打字错误align self:flex-end，修复该问题。