Flex-box＆＃39;浮动式＆＃39;在某个断点处堆叠

Question

我将从一张我正在努力的方向开始。这是一个非常常见的resonsive布局＆＃39; grid＆＃39; 产品 - 卡或其他 - 与instagram或运球或任何销售东西的网站不同。

经典的难题是你很可能必须使用一些绝对的高度才能获得一致的东西 - 而绝对的高度意味着你必须有一些逻辑来确保没有任何东西突破绝对世界。 Flexbox有许多很好的选择可以帮助解决诸如“拉伸/成长”等问题。主要是将页脚保持在底部/但每个选项都倾向于某个标记，这不可避免地会在布局中删除您想要的另一个选项。我过去常常使用过JS。

我可以隐藏并展示海报＆＃39;键入图像标记以创建if else类型的查询，该查询以不同的标记结束 - 并且 工作以创建图中所示的布局。我的问题是 - 可以这个＆＃39;浮动＆＃39;喜欢的东西（用箭头表示）只用flex-box来完成？如果我将这2个元素包装在父/我不再能够使用flexbox的东西那使得这个优雅的其他部分

（我将我的代码放在底部）

仅使用flexbox的示例 - 我试图填写 https://codepen.io/sheriffderek/pen/VWgGgv?editors=0100

不同标记的示例 - 但是不允许我使用增长并保持按钮在视觉上停留在底部（我想我可以在这里使用绝对定位） https://codepen.io/sheriffderek/pen/c12df0754ea9cdd40bb9425a120088d7

这是@ MichaelCoker建议将主页和页脚包装在父级中的实现：https://codepen.io/sheriffderek/pen/weNNMp?editors=0100

但这个问题的答案可能是：＆＃34;不 - 如果不改变标记和方法，就没有办法做到这一点。＆＃34;我并不是说有一个银弹 - 并且可以涵盖所有场景，但是父母限制了做同样范围内改变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>
    <!-- ... -->

样式：

.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%

Answer 1

您可以将main和footer部分包含在另一个元素中，并在中型@media查询中，将.thing设置为flex row，以便行列由header和包含main和footer的新元素组成。

.thing-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.thing-list .thing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 2rem;
}
@media (min-width: 450px) {
  .thing-list .thing {
    border: 3px solid #f00;
  }
}
@media (min-width: 700px) {
  .thing-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .thing-list .thing {
    -ms-flex-preferred-size: 48%;
        flex-basis: 48%;
    border: 0;
  }
  .thing-list .thing main {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
	.thing-list .thing {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
	}
	.thing-list .thing header, .thing-list .thing .mainFoot {
		-webkit-box-flex: 1;
		    -ms-flex: 1 0 0;
		        flex: 1 0 0;
	}
	.thing-list .thing .mainFoot {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
}
@media (min-width: 900px) {
  .thing-list .thing {
    -ms-flex-preferred-size: 32%;
        flex-basis: 32%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
  }
	.thing-list .thing .mainFoot {
		-webkit-box-flex: 1;
		    -ms-flex: auto;
		        flex: auto;
	}
}
body {
  padding: 1rem;
}
.thing header,
.thing main,
.thing footer {
  padding: 1rem;
}
.thing header {
  background: #add8e6;
}
.thing main {
  background: #f5deb3;
}
.thing footer {
  background: #ffc0cb;
}
figure {
  margin: 0;
}
figure img {
  display: block;
  width: 100%;
  height: auto;
}

<ul class='thing-list'>
	
	<li class='thing'>
		<header>
			HEADER
			<figure>
				<img src="http://placehold.it/1600x900" alt="">
			</figure>
		</header>
		<div class="mainFoot">
		<main>
			MAIN: 
			<h2>Something...</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolorum similique dolores ipsum, cumque aspernatur.</p>
		</main>
		
		<footer>
			FOOTER<br>
			<button>Call to action</button>
		</footer>
		</div>
	</li>
	

	<li class='thing'>
		<header>
			HEADER
			<figure>
				<img src="http://placehold.it/1600x900" alt="">
			</figure>
		</header>
		<div class="mainFoot">
		<main>
			MAIN: 
			<h2>Something...</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolorum similique dolores ipsum, cumque aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolorum similique dolores ipsum, cumque aspernatur.</p>
		</main>
		
		<footer>
			FOOTER<br>
			<button>Call to action</button>
		</footer>
		</div>
	</li>
	
	<li class='thing'>
		<header>
			HEADER
			<figure>
				<img src="http://placehold.it/1600x900" alt="">
			</figure>
		</header>
		<div class="mainFoot">
		<main>
			MAIN: 
			<h2>Something...</h2>
			<p>Lorem ipsum dolor sit amet consectetur.</p>
		</main>
		
		<footer>
			FOOTER<br>
			<button>Call to action</button>
		</footer>
		</div>
	</li>
	
	<li class='thing'>
		<header>
			HEADER
			<figure>
				<img src="http://placehold.it/1600x900" alt="">
			</figure>
		</header>
		<div class="mainFoot">
		<main>
			MAIN: 
			<h2>Something...</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolorum similique dolores ipsum, cumque aspernatur.</p>
		</main>
		
		<footer>
			FOOTER<br>
			<button>Call to action</button>
		</footer>
		</div>
	</li>
	
	<li class='thing'>
		<header>
			HEADER
			<figure>
				<img src="http://placehold.it/1600x900" alt="">
			</figure>
		</header>
		<div class="mainFoot">
		<main>
			MAIN: 
			<h2>Something...</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolorum similique dolores ipsum, cumque aspernatur.</p>
		</main>
		
		<footer>
			FOOTER<br>
			<button>Call to action</button>
		</footer>
		</div>
	</li>
</ul>