html - 我怎样才能使用 flexbox 来实现内容环绕侧边栏的 float 侧边栏布局？

Question

我正在尝试实现在桌面上看起来像这样的响应式布局:

在手机上就像这样:

注意以下要求:

• 侧边栏应仅在适合内容的情况下占据垂直空间。在侧边栏下方，主要部分的内容应占据整个宽度。
• 在移动设备上，边栏应显示在主要内容下方。

这是一个包含我最初的 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>

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

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

有没有办法根据上述要求实现所需的布局，使用 flexbox、float 或其他技术？

Answer 1

您可以使用float切换显示和顺序。为了使用float，您需要在HTML 中将aside 置于首位，这样内容才能环绕。 flex 和 order 将在移动设备上将其发送回底部。

Example或下面的代码片段，其中包含 HTML 更新以从 flex 布局切换到 float 布局

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;
  }
}

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