Question

我遇到的问题是我无法在flexbox项目中设置与其父级相同的宽度。

以下是代码，而类theSpan的范围与其父级width不同。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您应该通过span将block变为display。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

类span的{{1}}元素是弹性项目（theSpan）的子元素。

此弹性项目不是一个弹性容器。

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

中

范围存在于标准block formatting context。

中

在BFC中，默认情况下，.item1是内联的，未替换的元素。

规范中提供span不起作用的原因：

10.2 Content width: the width property

此属性不适用于未替换的内联元素。该   未替换的内联元素框的内容宽度是   在其中呈现内容。

10.3.1 Inline, non-replaced elements

width: 100%属性不适用。

Answer 3

将.item1设为display:flex，然后将.theSpan设为flex:1 并且您可以将所有项目设置为flex:0 200px，因为您希望flex-basis 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>

nginx

为什么宽度为100％的元素不占用父宽度？

3 个答案: