强制flexbox元素向右浮动

Question

我目前正致力于在我的网站上进行响应，并且我撞到了墙上。在较小的分辨率下，我将flex-direction从row更改为column，更改了弹性元素的排序，将主文本框width更改为100%，并将边框更改为50%。

代码如下所示：

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

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

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

正如你所看到的sideboxes不是在容器内。把它们放在容器中有助于完全毁掉我以前的布局。

CSS通缉分辨率为：

.about { 
    flex-direction: column; 
} 

.about-mainbox { 
    order: 1; 
} 

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

效果是这样的：

正如你可以看到我想要的sideboxes是彼此相邻。任何解决方案，我不能想到没有添加额外的容器？

Answer 1

我希望我能正确理解你。您可以删除flex-direction财产.about

添加flex-wrap。然后，只需给一个.about-mainbox的width 100％

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

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

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

<section class="about" id="ABOUT"> 
 
    <div class="about-sidebox l">demo left 
 
    </div> 
 
    <div class="about-mainbox">demo 
 
    </div> 
 
    <div class="about-sidebox r">demo right 
 
    </div> 
 
</section>

Answer 2

最简单的是要做到这一点;

• 将about到flex-wrap: wrap所以它的柔性物品可以包装，跳过flex-direction所以使用其默认row
• 将mainbox到order: -1（默认为0），这将sidebox的前放置它，和flex-basis: 100%，这将使其充分宽度和通过这样做，它推动sidebox's到一个新行
• 给了sidebox的flex-basis: 50%是同样宽，min-width: 0;所以一直停留并排侧（如果你wan't他们来包装和堆放垂直时，他们的内容力量的他们，降本，或用一组宽度控制它，即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>