フレックスボックスは別のフレックスボックスの隣にありますか？

Question

私は子供の要素を持つ2つのフレックスボックスを持っています。私はこれらのフレックスボックスのそれぞれがページの50％を占めることを望みます。

<div class="flexbox"> 
    .... 
</div> 
<div class="flexbox"> 
    .... 
</div> 

私が試してみました：

.flexbox{ 
    display:flex; 
    width: 50%; 
    .... 

運で。私はコンテナに両方のdivをラップし、50％の基準でコンテナにflexを表示することも考えました。私はちょうどコンテナなしでそれを行う方法があるのだろうかと思っていたのですか？

Answer 1

この結果を取得するには以下を行う必要があります。

1. 使用display: inline-flexを.flexbox要素に
2. は、パディングとボーダー

* { 
 
    box-sizing: border-box; 
 
} 
 
body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.flexbox { 
 
    border: 1px solid black; 
 
    display: inline-flex; 
 
    width: 50%; 
 
}

<div class="flexbox"> 
 
    .... 
 
</div><div class="flexbox"> 
 
    .... 
 
</div>

用HTML

使用box-sizing: border-boxからホワイトスペースを削除します あなたは、私が隣同士に場所にそれらを推測flexbox兄弟が浮くことができ

Answer 2

- それをチェックアウト：

* { 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
.flexbox { 
 
    display: flex; 
 
    width: 50%; 
 
    border: 1px solid red; 
 
    float: left; 
 
} 
 
.flexbox > div { 
 
    flex: 1; 
 
    border: 1px solid red; 
 
}

<div class="flexbox"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div> 
 
<div class="flexbox"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div> 
 
<div style="clear:both"></div>