我怎样才能使用flexbox来实现一个浮动边栏布局，内容包含在侧边栏中？ [英] How can I use flexbox to achieve a floating sidebar layout with content that wraps around the sidebar?
问题描述
我试图在桌面上实现一个如下所示的响应式布局：
像这样在手机上：
请注意以下要求：
- 补充工具栏只应占用尽可能多的空间以适应内容。在侧边栏下方，主要部分的内容应占据整个宽度。
在移动设备上，侧边栏应显示在主内容的下面。
这是一个包含我的初始HTML和CSS的jsfiddle：
https://jsfiddle.net/sergkr/np6k2tj3/
和一段代码：
p>
body {font-family：Helvetica Neue，Helvetica，Arial，衬线; font-size：14px;填充：0 2em; line-height：1.4;颜色：＃333; background-color：#fff} section {margin：1.6em 0;} section> h2 {margin：0; padding：12px 24px; font-size：16px;背景：#eceeee; text-transform：uppercase;} section> p {margin：0; padding：12px 24px; background：#fafafa;}。container {display：flex; flex-wrap：wrap;} main {flex-basis：100％;}。sidebar {padding：0 2em;背景：＃fbf6f4;} @媒体屏幕和（最小宽度：1024px）{.container {flex-wrap：nowrap; } main {flex：1 1 70％; } .sidebar {flex：0 0 30％; margin-left：2em; }}
< div class =container> <主> < H1>主< / H1> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Ipsa eaque hic voluptates quas minus minus minima，officiis，quaerat animi illum dolor est ipsum maiores sunt sint，velit consequatur illo perspiciatis magni！ < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。劳动党安置动漫，一个储存伊索索塔萨贝支歌，deleniti voluptatibus理论莫迪padorur laudantium，努尔拉libero耳，ea molestias。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit，hic incidunt，eum，inventore qui veniam ex iure voluptatum deleniti accusamus quidem。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Sint，laudantium neque，dolor illo repellat totam fugiat veritatis sit harum，quam asperiores error minima ducimus id。 Repellat ea，omnis veniam。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。理由是什么？是否有必要分开工作？ vol voluptate，accusantium别名，autem hic dignissimos corporis quas暨！ < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Rerum praesentium，aut！ Nam officiis temporary reprehenderit，dignissimos minus voluptatum ullam。 Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus？ < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Est ab fugit repellendus exercitationem，incidunt perspiciatis，accusamus deserunt dolores molestias odio tenetur iure nesciunt！ Officiis debitis，cumque impedit odit vero earum。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Asperiores理由doloribus repellat molestias dolorum quae，iste，quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt，ducimus，quia ipsum。 < / p为H. < /节> < /主> < div class =sidebar> < H1>边栏< / H1> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia，quam quis。 Consectetur dolorem excepturi assumenda reprehenderit accusantium。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 quos ab laborum numquam dolore eius，aperiam amet cumque。劳动力市场在丘比特地区，巴黎地平线，dolorum。 Autem at，quisquam dolorem。 < / p为H. < /节> < / div>< / div>
浪费在边栏下面的空间。我希望主要内容环绕并在侧边栏结束后占据整个宽度，但我不确定如何实现该目标。
我想过使用 float：right 并将其放在< main> 之前，但会导致侧边栏首先显示手机（我希望它出现在内容后面）。
有没有一种方法可以根据上述要求来实现所需的布局，无论是使用flexbox，float还是其他技术？
更新
感谢让我朝另一个方向发展，实际上有一个Flexbox / Float组合，使 它只需要添加 Stack snippet 通过将 Stack snippet 2 请参阅CSS Stack snippet I'm trying to achieve a responsive layout that looks like this on desktop: And like this on mobile: Note the following requirements: Here is a jsfiddle containing my initial HTML and CSS: https://jsfiddle.net/sergkr/np6k2tj3/ and a snippet:
Note there is wasted space below the sidebar. I want the main content to wrap around and take up the full width after the sidebar ends, but I'm not sure how to achieve that. I thought about using Is there a way to achieve the desired layout given the above requirements, either using flexbox, float, or some other technique? Updated Thanks to G-Cyr, who put me in another direction, there is actually a Flexbox/Float combination, making the All it takes is to add Stack snippet
And by putting the Stack snippet 2
With See the notes in the CSS Stack snippet
这篇关于我怎样才能使用flexbox来实现一个浮动边栏布局，内容包含在侧边栏中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！部分 flex列容器，它们看起来尊重浮动元素并包装一个圆的它。
display：flex; flex-direction：column; 到部分规则......它甚至可以用于IE11：）
body {font-family： Helvetica Neue，Helvetica，Arial，sans-serif; font-size：14px;填充：0 2em; line-height：1.4;颜色：＃333; background-color：#fff} section {display：flex; / *添加* / flex-direction：列; / *加* / margin：1.6em 0;} section> h2 {margin：0; padding：12px 24px; font-size：16px;背景：#eceeee; text-transform：uppercase;} section> p {margin：0; padding：12px 24px; background：#fafafa;}。container {display：flex; flex-wrap：wrap;} main {flex-basis：100％;}。sidebar {order：1;填充：0 2em;背景：＃fbf6f4;} @媒体屏幕和（最小宽度：1024px）{.container {display：block; } .sidebar {float：right;宽度：30％;保证金：0 2em; }} < div class =container> < div class =sidebar> < H1>边栏< / H1> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia，quam quis。 Consectetur dolorem excepturi assumenda reprehenderit accusantium。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 quos ab laborum numquam dolore eius，aperiam amet cumque。劳动力市场在丘比特地区，巴黎地平线，dolorum。 Autem at，quisquam dolorem。 < / p为H. < /节> < / DIV> <主> < H1>主< / H1> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Ipsa eaque hic voluptates quas minus minus minima，officiis，quaerat animi illum dolor est ipsum maiores sunt sint，velit consequatur illo perspiciatis magni！ < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。劳动党安置动漫，一个储存伊索索塔萨贝支歌，deleniti voluptatibus理论莫迪padorur laudantium，努尔拉libero耳，ea molestias。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit，hic incidunt，eum，inventore qui veniam ex iure voluptatum deleniti accusamus quidem。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Sint，laudantium neque，dolor illo repellat totam fugiat veritatis sit harum，quam asperiores error minima ducimus id。 Repellat ea，omnis veniam。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。理由是什么？是否有必要分开工作？ vol voluptate，accusantium别名，autem hic dignissimos corporis quas暨！ < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Rerum praesentium，aut！ Nam officiis temporary reprehenderit，dignissimos minus voluptatum ullam。 Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus？ < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Est ab fugit repellendus exercitationem，incidunt perspiciatis，accusamus deserunt dolores molestias odio tenetur iure nesciunt！ Officiis debitis，cumque impedit odit vero earum。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Asperiores理由doloribus repellat molestias dolorum quae，iste，quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt，ducimus，quia ipsum。 < / p为H. < /节> < / main>< / div>
$ b
h2 和 p 放入部分自己也是 p 本身将环绕浮动元素
body {font-family：Helvetica Neue，Helvetica，Arial ， 无衬线字体; font-size：14px;填充：0 2em; line-height：1.4;颜色：＃333; background-color：#fff} section {display：flex; / *添加* / flex-direction：列; / *添加* /}部分：第n个孩子（2n + 2）{/ *添加* / margin-top：1.6em;}部分> h2 {margin：0; padding：12px 24px; font-size：16px;背景：#eceeee; text-transform：uppercase;} section> p {margin：0; padding：12px 24px; background：#fafafa;}。container {display：flex; flex-wrap：wrap;} main {flex-basis：100％;}。sidebar {order：1;填充：0 2em;背景：＃fbf6f4;} @媒体屏幕和（最小宽度：1024px）{.container {display：block; } .sidebar {float：right;宽度：30％;保证金：0 2em; }} < div class =container> < div class =sidebar> < H1>边栏< / H1> <节> < H2>部分< / H2> < /节> <节> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 < / p为H. < /节> <节> < H2>部分< / H2> < /节> <节> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 quos ab laborum numquam dolore eius，aperiam amet cumque。劳动力市场在丘比特地区，巴黎地平线，dolorum。 < / p为H. < /节> < / DIV> <主> < H1>主< / H1> <节> < H2>部分< / H2> < /节> <节> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Ipsa eaque hic voluptates quas minus minus minima，officiis，quaerat animi illum dolor est ipsum maiores sunt sint，velit consequatur illo perspiciatis magni！ < / p为H. < /节> <节> < H2>部分< / H2> < /节> <节> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。劳动党安置动漫，一个储存伊索索塔萨贝支歌，deleniti voluptatibus理论莫迪padorur laudantium，努尔拉libero耳，ea molestias。 < / p为H. < /节> <节> < H2>部分< / H2> < /节> <节> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit，hic incidunt，eum，inventore qui veniam ex iure voluptatum deleniti accusamus quidem。 < / p为H. < /节> <节> < H2>部分< / H2> < /节> <节> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Sint，laudantium neque，dolor illo repellat totam fugiat veritatis sit harum，quam asperiores error minima ducimus id。 Repellat ea，omnis veniam。 < / p为H. < /节> <节> < H2>部分< / H2> < /节> <节> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。理由是什么？是否有必要分开工作？ vol voluptate，accusantium别名，autem hic dignissimos corporis quas暨！ < / p为H. < /节> <节> < H2>部分< / H2> < /节> <节> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Rerum praesentium，aut！ Nam officiis temporary reprehenderit，dignissimos minus voluptatum ullam。 Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus？ < / p为H. < /节> <节> < H2>部分< / H2> < /节> <节> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Est ab fugit repellendus exercitationem，incidunt perspiciatis，accusamus deserunt dolores molestias odio tenetur iure nesciunt！ Officiis debitis，cumque impedit odit vero earum。 < / p为H. < /节> <节> < H2>部分< / H2> < /节> <节> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Asperiores理由doloribus repellat molestias dolorum quae，iste，quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt，ducimus，quia ipsum。 < / p为H. < /节> < / main>< / div>
$ b
$ b $
inline 简短回答是不，使用Flexbox是不可能的。虽然，它们将环绕浮动元素。
虽然缺点很多，但难点在于如何让背景颜色填充可用空间，所以下面就是它的样子。w / o
体{font-family：Helvetica Neue，Helvetica，Arial，sans-serif; font-size：14px;填充：0 2em; line-height：1.4;颜色：＃333; background-color：#fff} section {display：inline; / *改变显示类型* / / * margin：1.6em 0; * / / *对内联元素没有影响* /} section> h2 {display：inline; / *改变显示类型* / / * margin：0; * / / *对内联元素没有影响* / padding：12px 24px; font-size：16px;背景：#eceeee; text-transform：uppercase;} section> p {display：inline; / *改变显示类型* / / * margin：0; * / / *对内联元素没有影响* / / * padding：12px 24px; * / / *在多行内联元素上不能正常工作* / / * background ：#fafafa; * / / *因为看起来不好而被移除* /} section> p :: before，section> p :: after {content：\A\A; / *创建2个换行符* / white-space：pre; / *或pre-wrap * /}。container {display：flex; flex-wrap：wrap;} main {flex-basis：100％;}。sidebar {order：1;填充：0 2em;背景：＃fbf6f4;} @媒体屏幕和（最小宽度：1024px）{.container {display：block; } .sidebar {float：right;宽度：30％;保证金：0 2em; }} < div class =container> < div class =sidebar> < H1>边栏< / H1> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia，quam quis。 Consectetur dolorem excepturi assumenda reprehenderit accusantium。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 quos ab laborum numquam dolore eius，aperiam amet cumque。劳动力市场在丘比特地区，巴黎地平线，dolorum。 Autem at，quisquam dolorem。 < / p为H. < /节> < / DIV> <主> < H1>主< / H1> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Ipsa eaque hic voluptates quas minus minus minima，officiis，quaerat animi illum dolor est ipsum maiores sunt sint，velit consequatur illo perspiciatis magni！ < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。劳动党安置动漫，一个储存伊索索塔萨贝支歌，deleniti voluptatibus理论莫迪padorur laudantium，努尔拉libero耳，ea molestias。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit，hic incidunt，eum，inventore qui veniam ex iure voluptatum deleniti accusamus quidem。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Sint，laudantium neque，dolor illo repellat totam fugiat veritatis sit harum，quam asperiores error minima ducimus id。 Repellat ea，omnis veniam。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。理由是什么？是否有必要分开工作？ vol voluptate，accusantium别名，autem hic dignissimos corporis quas暨！ < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Rerum praesentium，aut！ Nam officiis temporary reprehenderit，dignissimos minus voluptatum ullam。 Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus？ < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Est ab fugit repellendus exercitationem，incidunt perspiciatis，accusamus deserunt dolores molestias odio tenetur iure nesciunt！ Officiis debitis，cumque impedit odit vero earum。 < / p为H. < /节> <节> < H2>部分< / H2> < p为H. Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Asperiores理由doloribus repellat molestias dolorum quae，iste，quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt，ducimus，quia ipsum。 < / p为H. < /节> < / main>< / div>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
margin: 1.6em 0;
}
section>h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section>p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
padding: 0 2em;
background: #fbf6f4;
}
@media screen and (min-width: 1024px) {
.container {
flex-wrap: nowrap;
}
main {
flex: 1 1 70%;
}
.sidebar {
flex: 0 0 30%;
margin-left: 2em;
}
}<div class="container">
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
</p>
</section>
</div>
</div>float: right on the sidebar and putting it before the <main>, but that results in the sidebar appearing first on mobile (I want it to appear after the content).section flex column containers, which appear to respect the floated element and wrap around it.display: flex; flex-direction: column; to the section rule...and it even work with IE11 :)body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
display: flex; /* added */
flex-direction: column; /* added */
margin: 1.6em 0;
}
section > h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section > p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
order: 1;
padding: 0 2em;
background: #fbf6f4;
}
@media screen and (min-width: 1024px) {
.container {
display: block;
}
.sidebar {
float: right;
width: 30%;
margin: 0 2em;
}
}<div class="container">
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
</p>
</section>
</div>
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
</div>
h2 and the p in a section of their own, also the p by itself will wrap around the floated elementbody {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
display: flex; /* added */
flex-direction: column; /* added */
}
section:nth-child(2n+2) { /* added */
margin-top: 1.6em;
}
section > h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section > p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
order: 1;
padding: 0 2em;
background: #fbf6f4;
}
@media screen and (min-width: 1024px) {
.container {
display: block;
}
.sidebar {
float: right;
width: 30%;
margin: 0 2em;
}
}<div class="container">
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum.
</p>
</section>
</div>
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
</div>
Short answer is "No, that won't be possible using Flexbox".inline elements though, they will wrap around a floated element.that inline elements we can accomplish something that is similar, which it has some drawbacks though, where the difficult part is to have the background color fill the available space, so here is how it could look like w/o.body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
display: inline; /* changed display type */
/*margin: 1.6em 0;*/ /* have no effect on inline element */
}
section > h2 {
display: inline; /* changed display type */
/*margin: 0;*/ /* have no effect on inline element */
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section > p {
display: inline; /* changed display type */
/*margin: 0;*/ /* have no effect on inline element */
/*padding: 12px 24px;*/ /* won't work properly on
multiline inline element */
/*background: #fafafa;*/ /* removed as it does not look good */
}
section > p::before,
section > p::after {
content:"\A\A"; /* create 2 line break's */
white-space: pre; /* or pre-wrap */
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
order: 1;
padding: 0 2em;
background: #fbf6f4;
}
@media screen and (min-width: 1024px) {
.container {
display: block;
}
.sidebar {
float: right;
width: 30%;
margin: 0 2em;
}
}<div class="container">
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
</p>
</section>
</div>
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
</div>
