Flexbox的文字，包裝

我有以下佈局：Flexbox的文字，包裝

.main { 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    background-color: rgba(255, 46, 0, 0.5); 
 
} 
 

 
.container { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: auto; 
 
    border: 1px solid black; 
 
    z-index: 2; 
 
    background-color: white; 
 
    display: flex; 
 
    align-items: stretch; 
 
    justify-content: center; 
 
} 
 

 
.text1 { 
 
    border: 1px solid red; 
 
    flex-wrap: nowrap; 
 
    flex-grow: 1; 
 
} 
 

 
.text2 { 
 
    border: 1px solid blue; 
 
    flex-wrap: nowrap; 
 
    flex-grow: 2; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <div class="text1">Lorem impsum pimpsum</div> 
 
    <div class="text2">Tex2</div> 
 
    </div> 
 
</div>

，我想我的文字的div.text1和.text2裏面包裹而不會干擾flexgrow。換句話說，有沒有辦法強制flexbox保持相同的大小，而不管其中的文字是什麼？

Btw。我使用Chrome。

Codepen鏈接：https://codepen.io/Konrad29/pen/Oxbmqx

來源

2017-09-24 Konrad

如果我的答案解決了原始問題，請儘可能接受。如果你的2_little_問題不是這個的後續，他們可能需要作爲新問題發佈，但我們會看到...所以給他們 – LGSon

我已經標記你的問題作爲答案。我已經改變了對這兩個問題的看法，它們是不必要的，並且已經得到了回答。謝謝你的幫助：） – Konrad

通過設置flex-basis到0，你控制的寬度（分配空間）與flex-grow

更新這些規則

.text1{ 
    border: 1px solid red; 
    flex-wrap:nowrap; 
    flex:1 1 0;      /* updated */ 
    min-width: 0;     /* might be needed as well */ 
} 
.text2{ 
    border: 1px solid blue; 
    flex-wrap:nowrap; 
    flex:2 2 0;      /* updated */ 
    min-width: 0;     /* might be needed as well */ 
}

這將使text1到佔1/3的可用空間和text2 2/3。

基於你會把每個text1/2什麼樣的內容，你可能還需要設置min-width，默認爲auto，以0允許它比它的內容

Updated codepen

堆棧段小

.main{ 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    background-color :rgba(255, 46, 0, 0.5); 
 
} 
 
.container{ 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: auto; 
 
    border: 1px solid black; 
 
    z-index:2; 
 
    background-color: white; 
 
    display: flex; 
 
    align-items: stretch; 
 
    justify-content:center; 
 
} 
 
.text1{ 
 
    border: 1px solid red; 
 
    flex-wrap:nowrap; 
 
    flex:1 1 0; 
 
} 
 
.text2{ 
 
    border: 1px solid blue; 
 
    flex-wrap:nowrap; 
 
    flex:2 2 0; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <div class="text1">Lorem impsum pimpsum</div> 
 
    <div class="text2">Tex2</div> 
 
    </div> 
 
</div>

來源

2017-09-24 09:56:30 LGSon

Flexbox的文字，包裝

回答

相關問題