Flexbox旁邊有另一個flexbox嗎？

Question

我有兩個彈性盒子元素。我希望每個這些彈性盒佔據頁面的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. 從HTML
3. 使用box-sizing: border-box爲填充和邊框

* { 
 
    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>

刪除空白

Answer 2

您可以浮動flexbox兄弟姐妹我猜地方他們彼此相鄰 - 檢查出來：

* { 
 
    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>