フレックスアイテムを次の行の右端に移動

Question

私は、C1、C2、C3、C4の4つの要素を持つフレックスボックスコンテナを持っています。

現在、すべて1行に表示されています。

私の目標は、C4をC3の下に表示することです。

私の目標を達成する方法を教えてもらえますか？前もって感謝します。 https://jsfiddle.net/vvqhejt3/3/

.flexbox { 
 
    display: flex; 
 
    border: 1px solid black; 
 
    width: 330px; 
 
} 
 
.content1 { 
 
    width: 100px; 
 
    margin-right: 10px; 
 
    background-color: blue; 
 
    height: 50px; 
 
} 
 
.content2 { 
 
    width: 100px; 
 
    margin-right: 10px; 
 
    background-color: yellow; 
 
} 
 
.content3 { 
 
    width: 100px; 
 
    margin-right: 10px; 
 
    background-color: red; 
 
} 
 
.content4 { 
 
    width: 100px; 
 
    background-color: green; 
 
    height: 10px; 
 
}

<div class="flexbox"> 
 
    <div class="content1">C1</div> 
 
    <div class="content2">C2</div> 
 
    <div class="content3">C3</div> 
 
    <div class="content4">C4</div> 
 
</div>

Answer 1

、それはいくつかのデフォルト設定が付属しています。これらの中で次のとおり

• flex-direction: row - フレックス項目が整列する水平
• justify-content: flex-start - フレックス項目が行の先頭にスタックう
• align-items: stretch - フレックスアイテムは、容器の断面サイズをカバーするように拡大します
• flex-wrap: nowrap - フレックス項目は、最後の設定に注意してください一行に

滞在を余儀なくされています。

あなたの4つのdivは、強制的に1行にとどまります。

flex-wrap: wrapでこの設定を上書きすることができます。

次に、auto marginを使用して項目を右側に配置することができます。

.flexbox { 
 
    display: flex; 
 
    flex-wrap: wrap;   /* NEW */ 
 
    border: 1px solid black; 
 
    width: 330px; 
 
} 
 

 
.content1 { 
 
    width: 100px; 
 
    margin-right: 10px; 
 
    background-color: blue; 
 
    height: 50px; 
 
} 
 

 
.content2 { 
 
    width: 100px; 
 
    margin-right: 10px; 
 
    background-color: yellow; 
 
} 
 

 
.content3 { 
 
    width: 100px; 
 
    margin-right: 10px; 
 
    background-color: red; 
 
} 
 

 
.content4 { 
 
    width: 100px; 
 
    background-color: green; 
 
    height: 10px; 
 
    margin-left: auto;   /* NEW */ 
 
    margin-right: 10px;  /* NEW */ 
 
}

<div class="flexbox"> 
 
    <div class="content1"> C1 </div> 
 
    <div class="content2"> C2 </div> 
 
    <div class="content3"> C3 </div> 
 
    <div class="content4"> C4 </div> 
 
</div>

参考文献：

• Methods for Aligning Flex Items along the Main Axis
• 5.2. Flex Line Wrapping: the flex-wrap property

Answer 2

のdivクラス.content4にコンテナとmargin-right: 10px;にflex-flow: row wrap;とjustify-content: flex-end;を追加します。

次は私のコードです。最後のコンテナのクラスも必ず修正してください。現在のところ、conten4

また、ここにはフレックスボックスの簡単なガイドへのリンクがあります。あなたはフレックスコンテナ（display: flexまたはdisplay: inline-flex）を作成する場合 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

HTML

<div class="flexbox"> 
    <div class="content1"> C1 </div> 

    <div class="content2"> C2 </div> 

    <div class="content3"> C3 </div> 

    <div class="content4"> C4 </div> 
</div> 

CSS

.flexbox { 
    display: flex; 
    border: 1px solid black; 
    width: 330px; 
    flex-flow: row wrap; 
    justify-content: flex-end; 
} 

.content1 { 
    width: 100px; 
    margin-right: 10px; 
    background-color: blue; 
    height: 50px; 
} 

.content2 { 
    width: 100px; 
    margin-right: 10px; 
    background-color: yellow; 
} 

.content3 { 
    width: 100px; 
    margin-right: 10px; 
    background-color: red; 
} 

.content4 { 
    width: 100px; 
    background-color: green; 
    height: 10px; 
    margin-right: 10px; 
}