如何使用flexbox实现包含侧边栏内容的浮动侧边栏布局?

时间:2017-10-24 22:16:35

标签: html css css3 flexbox

我试图在桌面上实现响应式布局:

Desktop layout

在移动设备上这样:

Mobile layout

请注意以下要求:

  • 侧边栏应该只占用适合内容所需的垂直空间。在侧边栏下方,主要部分的内容应占据整个宽度。
  • 在移动设备上,侧边栏应显示在主要内容下方。

这是一个包含我的初始HTML和CSS的jsfiddle:

https://jsfiddle.net/sergkr/np6k2tj3/

和一个片段:



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>
&#13;
&#13;
&#13;

请注意,侧边栏下方有浪费的空间。我希望主要内容在侧边栏结束后环绕并占据整个宽度,但我不确定如何实现。

我考虑在侧边栏上使用float: right并将其放在<main>之前,但这会导致侧边栏首先出现在移动设备上(我希望它出现在内容之后)。

有没有办法在给定上述要求的情况下实现所需的布局,使用flexbox,float或其他技术?

2 个答案:

答案 0 :(得分:5)

您可以使用display切换orderfloat。要使用float,您需要aside在HTML中排在第一位,因此内容可以包含在内。 flexorder会在移动设备上将其发回底部。

下面带有HTML更新的

Example或片段,以便从flex布局切换到浮动布局

&#13;
&#13;
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 0 2em;
  line-height: 1.4rem;
  color: #ddd;
  background-color: #333
}

section {
  color:#333;
  margin: 1.6em 0;
}

section > h2 {
  margin: 0;
  padding: 12px 24px;
  font-size: 16px;
  background: #ace;
  text-transform: uppercase;
}

section > p {
  margin: 0;
  padding: 12px 24px;
  background: #fafafa;
}

.container {
overflow:hidden;
}

main {
  display:flex;
  flex-direction:column;
}

.sidebar {
  padding: 0 2em;
  background: tomato;
  order:2;
}

@media screen and (min-width: 1024px) {
  .container {
  }
  
  main {
    display:block;
  }
  main h1 {
    float:left;
    width:70%;
  }
  main section {
    clear:left;
    overflow:hidden;
  }
  
  .sidebar {
    width:25%;
    float:right;
    margin-left:2em;
  }
}
&#13;
<div class="container">
  <main>
    <h1>Main</h1>
    <aside 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>
  </aside>
    <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>
&#13;
&#13;
&#13;

答案 1 :(得分:3)

更新

感谢G-Cyr,他让我朝另一个方向发展,实际上有一个Flexbox / Float组合,制作了section flex列容器,它们似乎尊重浮动元素并环绕它。

只需将display: flex; flex-direction: column;添加到section规则......它甚至可以与IE11一起使用:)

Fiddle demo

Stack snippet

&#13;
&#13;
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;
  }
}
&#13;
<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>
&#13;
&#13;
&#13;

通过将h2p放在他们自己的section中,p本身也将包围浮动元素

Fiddle demo 2

Stack snippet 2

&#13;
&#13;
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  */
}
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;
  }
}
&#13;
<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>
&#13;
&#13;
&#13;

简短回答是&#34;不,使用Flexbox&#34;不可能。

inline元素虽然,它们将环绕浮动元素。

使用 inline元素,我们可以完成类似的事情, it 但是有一些缺点,其中困难的部分是让背景颜色填充可用空间,所以这里看起来就像是没有o /。

参见CSS中的注释

Fiddle demo

Stack snippet

&#13;
&#13;
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;
  }
}
&#13;
<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>
&#13;
&#13;
&#13;