使用 flexbox 更改浮动和非浮动元素的顺序

Posted 2023-03-05

【中文标题】使用 flexbox 更改浮动和非浮动元素的顺序

【英文标题】：Changing order of floated and non-floated elements with flexbox

【发布时间】：2017-12-30 09:31:53

【问题描述】：

我想更改浮动和非浮动元素的顺序（浮动由媒体查询更改）。

现在，渲染的页面是这样的，但是 Block A 后面应该是 Block B，然后是 Block C。

使用 flexbox 的答案会很棒。

section.one 
  box-sizing: border-box;
  width: 48%;
  margin-right: 2%;
  column-count: 1;
  float: left;


section.two 
  box-sizing: border-box;
  width: 48%;
  margin-left: 2%;
  column-count: 1;
  float: left;


.block 
  background-color: red;
  width: 100%;
  height: 200px;
  clear: both;
  padding: 1em 0;


.block h2 
  text-align: center;


@media (max-width:500px) 
  section.one,
  section.two 
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  

<article>

  <div class="content">
    <h1 class="heading">Heading</h1>
    <section class="one">
      <h2>Block B</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo doloreslita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </section>
    <section class="two">
      <h2>Block C</h2>
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
        erat, sed diam voluptua. At vero eos et accusam et justo duo dolores rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </section>
    <div class="block">
      <h2>
        Block A
      </h2>
    </div>
  </div>
</article>

这是小提琴：https://jsfiddle.net/mqfcz46z/4/

【问题讨论】：

css-tricks.com/snippets/css/a-guide-to-flexbox 它可以通过 flex 轻松处理。 ...要修改订单，请使用order！见下方答案

【参考方案1】：

有了 flexbox，你就不再需要使用浮动了。其实floats don't work in a flex container。

您可以使用 flex 属性来调整大小、对齐和重新排列您的项目。

.content 
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;


section.one 
  flex: 0 0 48%;


section.two 
  flex: 0 0 48%;


.block 
  flex: 0 0 100%;
  height: 200px;
  background-color: red;


.block h2 
  text-align: center;


@media (max-width:500px) 
  section.one  order: 2; 
  section.two  order: 1; 
  .block       order: 0; 

<article>
  <h1 class="heading">Heading</h1>
  <div class="content">
    <section class="one">
      <h2>Block B</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo doloreslita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </section>
    <section class="two">
      <h2>Block C</h2>
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
        erat, sed diam voluptua. At vero eos et accusam et justo duo dolores rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </section>
    <div class="block">
      <h2>Block A</h2>
    </div>
  </div>
</article>

jsFiddle

在此处了解有关order 属性的更多信息：Is there a “previous sibling” CSS selector?