フレックスボックス要素を右に浮かべるようにする

Question

私は現在、私のウェブサイトの応答性に取り組んでいます。小さな解像度では、flex-directionをcolumnからrowに変更し、フレックス要素の順序を変更し、widthを100%に変更し、サイドボックスを50%に変更しました。あなたはsideboxesがコンテナ内ではありません見ることができるように

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

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

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

：

コードは次のようになります。それらをコンテナに入れることは、私の以前のレイアウトを完全に破壊するのに役立ちます。希望の解像度のための

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

できるだけ簡単なこれを行うことです。そのフレックスアイテムをラップすることができますので、flex-wrap: wrapからaboutを設定

• 、flex-directionをスキップするので、sidebox年代の前にそれを置くであろう、row
• （デフォルトは0ある）order: -1にmainboxを設定し、デフォルトを使用して、そして、それは完全な幅を取り、それをすることによって行いますflex-basis: 100%は、それが（S flex-basis: 50%同じ幅であることを「は
• sideboxを与える新しい行にS」、およびmin-width: 0;はそう、彼らはサイド・バイ・サイドの滞在sideboxをプッシュもし、あんたがこの場合にはつまり、私はまた、あなたがフレキシボックスの独自のプロパティを使用することを推奨します）すなわちmin-width: 150px;、そのコンテンツ力の彼らは、このドロップ、または、設定された幅とそれを制御する際にラップし、垂直スタックする

それらをwan't 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>