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