我有以下布局:
.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 保持相同的大小,而不管其中的文本如何?
我正在使用 Chrome。代码笔链接:https://codepen.io/Konrad29/pen/Oxbmqx
最佳答案
通过将 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
以允许它小于它的内容
堆栈片段
.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>
关于html - Flexbox 文本环绕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46388766/