强制flexbox元素向右浮动

Question

我目前正致力于在我的网站上开展响应工作，而且我还是碰壁了。在较小的分辨率上，我将flex-direction更改为column row，更改了flex元素的顺序，将主文本框width更改为100%，将侧框更改为{ {1}}。

代码如下所示：

50%

如您所见，侧箱不在容器内。将它们放入容器有助于完全破坏我以前的布局。

想要解决的CSS是：

<section class="about" id="ABOUT">
    <div class="about-sidebox l">
    </div>

    <div class="about-mainbox">
    </div>

    <div class="about-sidebox r">
    </div>
</section>

效果是这样的：

正如您所看到的，我希望侧箱彼此相邻。没有添加额外容器我无法想到的任何解决方案？

Answer 1

我希望我能正确理解你。您可以从flex-direction

中删除.about媒体资源

添加flex-wrap。然后只需.about-mainbox {100} <{1}}

width

.about {
  display: flex;
  flex-wrap: wrap;
}

.about-mainbox {
  order: 1;
  width: 100%;
}

.about-sidebox {
  order: 2;
  width: 50%;
}

Answer 2

最简单的方法就是这样做;

• 将about设置为flex-wrap: wrap，以便其灵活项目可以换行，跳过flex-direction，使其使用默认row
• 将mainbox设置为order: -1（默认为0），将其定位在sidebox之前，将flex-basis: 100%设置为sidebox它需要全宽，并通过这样做，它将sidebox推送到新行
• 让flex-basis: 50%的{​​{1}}同样宽，min-width: 0;让它们并排（如果你不想让它们包裹并叠加垂直内容强制它们，删除它，或用设定的宽度控制它，即min-width: 150px;）

我还建议您使用Flexbox自己的属性，即在这种情况下flex-basis而不是width

.about {
  display: flex;
  flex-wrap: wrap;
}

.about-mainbox {
  flex-basis: 100%;
  order: -1;
}

.about-sidebox {
  flex-basis: 50%;
  min-width: 0;
}

<section class="about" id="ABOUT">

  <div class="about-sidebox l">Left
  </div>

  <div class="about-mainbox">Main
  </div>

  <div class="about-sidebox r">Right
  </div>

</section>