Css 弹性箱'；像'一样浮动；在某个断点处堆叠

我将从一张我正在努力的图片开始。这是一个非常常见的产品响应性布局“网格”——卡片或任何东西——与instagram、dribble或任何销售物品的网站没有什么不同

经典的难题是，你很可能必须使用一些绝对高度来获得一致性——绝对高度意味着你必须有一些逻辑，以确保绝对世界不会发生任何事情。Flexbox有许多很好的选项可以帮助您完成诸如“拉伸/增长”主视图以保持页脚在底部等操作，但每个选项都倾向于某个标记，这不可避免地会在布局中删除另一个您想要的选项。我过去通常使用JS

我可以隐藏和显示“poster”类型的图像标记，以创建一个以不同标记结尾的if-else类型查询，这样可以创建图中所示的布局。我的问题是-这种类似于“浮动”的东西（用箭头显示）可以单独用flex box完成吗？如果我把这两个元素包装在一个父元素中，我就不能再使用flexbox的东西了，因为flexbox的东西会让这个系统的其他部分变得优雅

（我将把代码放在底部）

只有flexbox的示例-我正在尝试填写

一个不同标记的示例-但这不允许我使用grow并将按钮保持在可视的底部（我想我可以在这里使用绝对定位）

下面是@MichaelCoker建议将main和footer包装在父级中的一个实现：

但这个问题的答案很可能是：“不——如果不改变标记和方法，就没有办法做到这一点。”我不是说有一个银弹——所有的场景都可以涵盖，但家长限制了在同一范围内做事情的能力，比如改变3件事情的顺序

标记：

<ul class='thing-list'>
    
    <li class='thing'>
        <header>
            HEADER
            <figure>
                <img src="http://placehold.it/1600x900" alt="">
            </figure>
        </header>
        
        <main>
            MAIN: 
            <h2>Something...</h2>
        </main>
        
        <footer>
            FOOTER<br>
            <button>Call to action</button>
        </footer>
    </li>
    <!-- ... -->

---

您可以将

main

和

footer

部分包装到另一个元素中，并在media

@media

查询中，将

.thing

设置为flex

行

，这样行列由

页眉

和新元素包装

main

和

页脚组成


。物品清单{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
}
.物品清单.物品{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
边缘底部：2rem；
}
@介质（最小宽度：450px）{
.物品清单.物品{
边框：3px实心#f00；
}
}
@介质（最小宽度：700px）{
.物品清单{
-webkit盒方向：水平；
-webkit盒方向：正常；
-ms柔性方向：行；
弯曲方向：行；
-ms-flex-wrap:wrap；
柔性包装：包装；
-webkit盒包：证明；
-ms-flex-pack:justify；
证明内容：之间的空间；
}
.物品清单.物品{
-ms-flex首选尺寸：48%；
弹性基准：48%；
边界：0；
}
.物品清单.主要物品{
-webkit-box-flex:1；
-ms-flex阳性1例；
柔性生长：1；
}
.物品清单.物品{
-webkit盒方向：水平；
-webkit盒方向：正常；
-ms柔性方向：行；
弯曲方向：行；
}
.thing list.thing header.thing list.thing.mainFoot{
-webkit-box-flex:1；
-ms-flex:100；
弹性：100；
}
.物品清单.物品.主脚{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
}
}
@介质（最小宽度：900px）{
.物品清单.物品{
-ms-flex首选尺寸：32%；
弹性基准：32%；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
}
.物品清单.物品.主脚{
-webkit-box-flex:1；
-ms-flex:auto；
flex：自动；
}
}
身体{
填充：1rem；
}
.东西头，
.主要的事情，
.事物页脚{
填充：1rem；
}
.东西头{
背景：#添加8e6；
}
.主菜{
背景:#f5deb3；
}
.事物页脚{
背景：#ffc0cb；
}
身材{
保证金：0；
}
图img{
显示：块；
宽度：100%；
高度：自动；
}


标题
主要内容：
某物
我的同僚们都是精英。你可以用同样的方式来表达自己的观点，也可以用同样的方式表达自己的观点

页脚

行动呼吁


标题
主要内容：
某物
我的同僚们都是精英。你可以用同样的方式来表达自己的观点，也可以用同样的方式表达自己的观点。我的同僚们都是精英。你可以用同样的方式来表达自己的观点，也可以用同样的方式表达自己的观点

页脚

行动呼吁


标题
主要内容：
某物
洛雷姆·伊普苏姆·多洛尔·阿梅特·康塞特图

页脚

行动呼吁


标题
主要内容：
某物
我的同僚们都是精英。你可以用同样的方式来表达自己的观点，也可以用同样的方式表达自己的观点

页脚

行动呼吁


标题
主要内容：
某物
我的同僚们都是精英。你可以用同样的方式来表达自己的观点，也可以用同样的方式表达自己的观点

页脚

行动呼吁

你好，谢里夫，这就是你想要的？啊@MichaelCoker-我的英雄。威尔，在回答中加上解释
.thing-list
    display: flex
    flex-direction: column
    .thing
        display: flex
        flex-direction: column
        margin-bottom: 2rem
    
        
@media (min-width: 450px)
    .thing-list
        // ?
        .thing
            // ?
            border: 3px solid red

@media (min-width: 700px)
    .thing-list
        flex-direction: row
        flex-wrap: wrap
        justify-content: space-between
        .thing
            flex-basis: 48%
            border: 0
            main
                flex-grow: 1
                
@media (min-width: 900px)
    .thing-list
        //
        .thing
            flex-basis: 32%