如何使用flexbox製作兩列布局？

Question

我正在嘗試使用display: flex進行兩列布局。我想顯示兩列，分別等於width和height（最大高度，其中有更多的內容）。

這是我的代碼。 https://jsbin.com/wataripuzu/edit?html,output

.row { 
 
    display: flex; 
 
}

<section class="row"> 
 
    <div class="left">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div> 
 
    <div>22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div> 
 
</section>

Answer 1

你只需要設置word-break: break-all因爲這些數字被視爲一個長字，默認情況下將留在一行。

.row { 
 
    display: flex; 
 
} 
 
.row > div { 
 
    word-break: break-all; 
 
    border: 1px solid black; 
 
    flex: 1; 
 
}

<section class="row"> 
 
    <div class="left">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div> 
 
    <div>22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div> 
 
</section>