使用display：flex時span元素的寬度不會增加：

我想將span-element放在容器div中。 span-element前面是另一個div。使用display：flex時span元素的寬度不會增加：

這裏是我的代碼：

<div id="container"> 
    <div id="a">A</div> 
    <span id="b">B</span> 
</div> 

#container { 
    display:flex; 

    background-color:#0AA; 
    text-align:center; 
} 

#a { 
    width:70%; 
    background-color:#AA0; 
}

和的jsfiddle： http://jsfiddle.net/pbek7av3/1/

我與文本對齊試了一下：中心和保證金：汽車，但可悲的是，這並不工作。

編輯：這將是另一種方法：http://jsfiddle.net/pbek7av3/2/ 有沒有像寬度：自動;讓div b拿走父容器的剩餘空間？

來源

2015-03-19 strudelkopf

要如何中心，和什麼有關上述DIV，你想要這樣做嗎？ – 2015-03-19 12:05:42

前面的div很好，我的目標是將span（「B」）放在容器div的剩餘空間中。 – strudelkopf 2015-03-19 12:07:24

您正在使用display: flex;父，所以span是一個內聯元素，用flex: 1;這只不過是成長爲柔性項類似

#b { 
    flex: 1; /* Or flex-grow: 1; */ 
}

Demo（錯過了以前的演示＃3這樣的聲明再次更新）

請注意，flex在舊版IE以及其他常用瀏覽器中不受支持，因此如果您對瀏覽器支持感興趣，請參閱CanIUse : Flexbox瞭解更多詳細信息。

測試用例沒有flex: 1;或flex-grow: 1;

Without flex property

隨着flex: 1;或flex-grow: 1;

With flex property

來源

2015-03-19 12:10:13

如果您知道只有兩個元素WH ICH越來越整個寬度，即一個你的DIV width:70%，那麼你就可以輕易地放棄剩餘width:30%到span這樣

#b { 
    text-align:center; 
    width:30%; 
}

Js Fiddle Demo

來源

2015-03-19 12:11:40 Sachin

使用display：flex時span元素的寬度不會增加：

回答

相關問題