目前正在尝试将flexbox集成到我当前的网站布局中。
我有两个并排的flexbox div。左右。
左侧包含文本信息标题。右边包含一张图片。
Codepen示例：http://codepen.io/Davabo/pen/vKKpWE
我无法弄清楚为什么我的div不会在浏览器调整大小时换行到下一行。
我希望div成为并排行，直到视口变小然后是768px。然后我希望divs叠加，而右边的div要高于左边的div。
我尝试了很多不同的柔性包裹，弯曲方向，柔性流动的变化，我似乎无法将它们包裹起来。
任何帮助都会很棒，谢谢。
* {
margin: 0;
}
.blog {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.left {
flex: 1;
height: auto;
background-color: red;
.entry {
h2, p {
text-align: center;
padding: 20px;
}
}
;
}
.right {
flex: 1;
height: auto;
background-color: green;
}<section class="blog">
<div class="left">
<div class="entry">
<h2>Title</h2>
<p>Date</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, dolorem explicabo, odit mollitia nulla voluptatem nihil sapiente? Totam dicta, perspiciatis odit porro iusto reiciendis omnis suscipit minima necessitatibus natus! Dolore quidem distinctio
aperiam praesentium cumque sed vero odit ipsam id neque numquam rem maiores ratione, tenetur aut laboriosam, quae hic ut, deserunt accusantium nemo? Ut explicabo delectus harum natus ad facere officiis tempora ex dolore reprehenderit expedita,
non vitae, laborum rem itaque nulla! Perspiciatis neque rem corrupti maiores dolore? Dicta voluptatum neque quasi, consequuntur. Aliquid voluptas adipisci distinctio suscipit laboriosam eius libero nam numquam. Expedita assumenda labore quae,
mollitia voluptatibus fugit exercitationem quo. Ipsam officia nulla temporibus asperiores velit distinctio, exercitationem quae qui necessitatibus delectus aut magni aliquid repellendus odit mollitia eaque eum. Porro repellendus vero, aut iste
harum, exercitationem fuga debitis culpa. Harum vel tempore unde asperiores nostrum, repellendus eum in architecto non voluptatem assumenda mollitia beatae necessitatibus nisi, laborum distinctio, ullam illo optio amet porro quisquam eius aut
facilis. Fuga minus modi aliquam distinctio dicta fugit sed cum! Iusto necessitatibus odit minima aspernatur possimus vel ullam, ipsam quas. Vitae, aliquam doloremque! Aspernatur ea, error facilis, consectetur nobis libero asperiores porro,
deserunt id aut, blanditiis alias nesciunt inventore perspiciatis consequatur praesentium ipsa dolores rerum est voluptate mollitia provident eius. Tempore quia eaque itaque rerum eum ut minima, magni ab deserunt, molestias distinctio sequi
velit ex. Illum, praesentium alias nemo id quod quam veritatis ratione nisi esse quis laudantium iusto molestias, at. Corrupti nulla deleniti culpa quo voluptatibus quaerat unde delectus voluptatum nisi impedit, inventore dolorum repellat. Quos
inventore, odit consequatur cumque laudantium eius sint suscipit a, ab corrupti aut quo nemo vero. Voluptatum reprehenderit unde cupiditate provident maxime a, sapiente nam, enim, eveniet eaque error autem impedit officiis nisi distinctio voluptate
deserunt, dolorum. Consequatur officia corporis nesciunt incidunt cupiditate, rerum quae nostrum totam, quaerat similique saepe neque alias fugiat in nulla perferendis magni, mollitia voluptas doloremque nam et tempora. Illo in libero dignissimos
voluptatum ut aperiam repellendus nisi distinctio totam incidunt. Perspiciatis animi, quidem rem. Illo praesentium voluptates veniam omnis ducimus magnam facere porro eveniet corporis alias vitae consectetur fugit eligendi, cumque vel impedit
temporibus, enim similique qui aliquid consequatur consequuntur et atque dicta. Ratione, perspiciatis quia voluptatum officiis ab necessitatibus quas eum laudantium in aliquam optio, possimus incidunt dignissimos obcaecati fugit libero et, ex
deserunt molestiae, totam recusandae harum quasi debitis. Nobis libero recusandae expedita, dolorem debitis eligendi? Cumque praesentium quam eum, sunt harum nemo voluptas cum tempora dolorem aspernatur, quis inventore dolor accusantium qui
exercitationem maiores officia totam, repellendus autem. Error laboriosam quibusdam, dolorum quisquam, tempore ipsum a tempora totam nam cumque ad assumenda. Recusandae ratione inventore reprehenderit, necessitatibus illo, culpa vel in omnis
debitis neque doloremque cumque, aperiam id tenetur molestias laboriosam eum dolorum, itaque similique ex deserunt quae mollitia tempore velit earum? Deserunt soluta nulla tempora iure ipsa, maiores harum similique nesciunt eius culpa alias
reiciendis, commodi quisquam aliquam tempore molestias distinctio iusto laboriosam autem consequatur molestiae. Voluptatum consequatur quaerat nulla dolor magni accusantium totam.</p>
</div>
<!-- content div -->
</div>
<!-- entry div -->
</div>
<!-- left div -->
<div class="right"></div>
</section>
答案 0 :(得分：2)
要使div的堆叠高于另一个，您可以在窗口小于flex: 0 0 100%时添加768px。
要使.right div高于.left，您可以将.right的顺序更改为-1，此处为fiddle
* {
margin: 0;
}
.blog {
display: flex;
flex-wrap: wrap;
}
.left {
flex: 1;
background-color: red;
}
.right {
flex: 1;
background-color: green;
min-height: 100vh;
}
@media(max-width: 768px) {
.left, .right {
flex: 0 0 100%;
}
.right {
order: -1;
}
}<section class="blog">
<div class="left">
<div class="entry">
<h2>Title</h2>
<p>Date</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, dolorem explicabo, odit mollitia nulla voluptatem nihil sapiente? Totam dicta, perspiciatis odit porro iusto reiciendis omnis suscipit minima necessitatibus natus! Dolore quidem distinctio
aperiam praesentium cumque sed vero odit ipsam id neque numquam rem maiores ratione, tenetur aut laboriosam, quae hic ut, deserunt accusantium nemo? Ut explicabo delectus harum natus ad facere officiis tempora ex dolore reprehenderit expedita,
non vitae, laborum rem itaque nulla! Perspiciatis neque rem corrupti maiores dolore? Dicta voluptatum neque quasi, consequuntur. Aliquid voluptas adipisci distinctio suscipit laboriosam eius libero nam numquam. Expedita assumenda labore quae,
mollitia voluptatibus fugit exercitationem quo. Ipsam officia nulla temporibus asperiores velit distinctio, exercitationem quae qui necessitatibus delectus aut magni aliquid repellendus odit mollitia eaque eum. Porro repellendus vero, aut iste
harum, exercitationem fuga debitis culpa. Harum vel tempore unde asperiores nostrum, repellendus eum in architecto non voluptatem assumenda mollitia beatae necessitatibus nisi, laborum distinctio, ullam illo optio amet porro quisquam eius aut
facilis. Fuga minus modi aliquam distinctio dicta fugit sed cum! Iusto necessitatibus odit minima aspernatur possimus vel ullam, ipsam quas. Vitae, aliquam doloremque! Aspernatur ea, error facilis, consectetur nobis libero asperiores porro,
deserunt id aut, blanditiis alias nesciunt inventore perspiciatis consequatur praesentium ipsa dolores rerum est voluptate mollitia provident eius. Tempore quia eaque itaque rerum eum ut minima, magni ab deserunt, molestias distinctio sequi
velit ex. Illum, praesentium alias nemo id quod quam veritatis ratione nisi esse quis laudantium iusto molestias, at. Corrupti nulla deleniti culpa quo voluptatibus quaerat unde delectus voluptatum nisi impedit, inventore dolorum repellat. Quos
inventore, odit consequatur cumque laudantium eius sint suscipit a, ab corrupti aut quo nemo vero. Voluptatum reprehenderit unde cupiditate provident maxime a, sapiente nam, enim, eveniet eaque error autem impedit officiis nisi distinctio voluptate
deserunt, dolorum. Consequatur officia corporis nesciunt incidunt cupiditate, rerum quae nostrum totam, quaerat similique saepe neque alias fugiat in nulla perferendis magni, mollitia voluptas doloremque nam et tempora. Illo in libero dignissimos
voluptatum ut aperiam repellendus nisi distinctio totam incidunt. Perspiciatis animi, quidem rem. Illo praesentium voluptates veniam omnis ducimus magnam facere porro eveniet corporis alias vitae consectetur fugit eligendi, cumque vel impedit
temporibus, enim similique qui aliquid consequatur consequuntur et atque dicta. Ratione, perspiciatis quia voluptatum officiis ab necessitatibus quas eum laudantium in aliquam optio, possimus incidunt dignissimos obcaecati fugit libero et, ex
deserunt molestiae, totam recusandae harum quasi debitis. Nobis libero recusandae expedita, dolorem debitis eligendi? Cumque praesentium quam eum, sunt harum nemo voluptas cum tempora dolorem aspernatur, quis inventore dolor accusantium qui
exercitationem maiores officia totam, repellendus autem. Error laboriosam quibusdam, dolorum quisquam, tempore ipsum a tempora totam nam cumque ad assumenda. Recusandae ratione inventore reprehenderit, necessitatibus illo, culpa vel in omnis
debitis neque doloremque cumque, aperiam id tenetur molestias laboriosam eum dolorum, itaque similique ex deserunt quae mollitia tempore velit earum? Deserunt soluta nulla tempora iure ipsa, maiores harum similique nesciunt eius culpa alias
reiciendis, commodi quisquam aliquam tempore molestias distinctio iusto laboriosam autem consequatur molestiae. Voluptatum consequatur quaerat nulla dolor magni accusantium totam.</p>
</div>
<!-- content div -->
</div>
<!-- entry div -->
</div>
<!-- left div -->
<div class="right"></div>
</section>
答案 1 :(得分：0)
你也可以将两个divs flex-basis设置为flex：1 1 400px; 例如。这不需要任何媒体查询。如果它们不适合视口，则元素将自动堆叠。