为什么宽度为100％的元素没有取得父宽度？

我面临的问题是我无法在Flexbox项目中设置与其父项相同的宽度。为什么宽度为100％的元素没有取得父宽度？

以下是代码和类别theSpan的跨度与其父项不具有相同的width。

.container { 
 
    display: flex; 
 
} 
 
.item1 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid yellow; 
 
} 
 
.item2 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid blue; 
 
} 
 
.item3 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid red; 
 
} 
 
.theSpan { 
 
    width: 100%; 
 
    border: 2px solid black; 
 
}

<div class='container'> 
 
    <div class='item1'> 
 
    <span class='theSpan'>abcdefg</span> 
 
    </div> 
 
    <div class='item2'> 
 
    <span>1</span> 
 
    </div> 
 
    <div class='item3'> 
 
    <span>2</span> 
 
    </div> 
 
</div>

来源

2016-09-19 Dean Zhao

跨度默认为内联元素 - 对于要定义宽度或高度的元素，最好使用DIV（=块元素） – Johannes

你span与theSpan类元件的柔性物品（.item1）的孩子。

此flex项目是而不是 flex容器。

因为only the children of a flex container participate in flex layout, 跨度（孙子）被取消资格。它不存在于flex formatting context。

范围存在于标准block formatting context中。

在BFC中，默认情况下，span是内嵌的非替换元素。

原因width: 100%没有在规范中提供了不工作：

10.2 Content width: the width property

此属性不适用于非替换行内元素。未被替换的内联元素的框的内容宽度是中的内容宽度。

10.3.1 Inline, non-replaced elements

的width属性不适用。

来源

2016-09-19 17:33:33

嗨，Michael，谢谢你的解释并帮助我编辑标题和内容（我不是母语为英语的人）。我将更多地关注CSS基础。 –

使.item1一个display:flex以及然后设置.theSpan为flex:1 既然你想拥有的200px你不需要一个flex-basis你可以将所有项目的flex:0 200px有flex:1

.container { 
 
    display: flex; 
 
} 
 
.container > div { 
 
    flex: 0 200px 
 
} 
 
.item1 { 
 
    display: flex; 
 
    border: 5px solid yellow; 
 
} 
 
.item2 { 
 
    border: 5px solid blue; 
 
} 
 
.item3 { 
 
    border: 5px solid red; 
 
} 
 
.theSpan { 
 
    flex: 1; 
 
    border: 2px solid black; 
 
}

<div class='container'> 
 
    <div class='item1'> 
 
    <span class='theSpan'>abcdefg</span> 
 
    </div> 
 
    <div class='item2'> 
 
    <span>1</span> 
 
    </div> 
 
    <div class='item3'> 
 
    <span>2</span> 
 
    </div> 
 
</div>

来源

2016-09-19 16:33:28 dippas

感谢您使用另一种方法。 –

我只是简单地解释了一下，并用一个例子来说明@michael_b和Sources的关系;） – dippas

您应该通过display将span转换为block。

.container { 
 
    display: flex; 
 
} 
 
.item1 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid yellow; 
 
} 
 
.item2 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid blue; 
 
} 
 
.item3 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid red; 
 
} 
 
.theSpan { 
 
    display:block;/* <= display instead or with width will do */ 
 
    border: 2px solid black; 
 
}

<div class='container'> 
 
    <div class='item1'> 
 
    <span class='theSpan'>abcdefg</span> 
 
    </div> 
 
    <div class='item2'> 
 
    <span>1</span> 
 
    </div> 
 
    <div class='item3'> 
 
    <span>2</span> 
 
    </div> 
 
</div>

来源

2016-09-19 16:54:27

为什么宽度为100％的元素没有取得父宽度？

回答

相关问题