Question

我正在尝试制作一个容器元素，一个弹性项目，宽度与它的span text子句相同。正如您通过检查代码段中的结果所看到的那样，尽管容器.calc-text-container占用的空间比子元素多，但即使flex-grow-property设置为0。

有没有办法达到预期的效果？

.calc {
  width: 230px;
  background: green;
  height: 100px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.calc a {
  display: flex;
  justify-content: center;
}
.calc-icon-container {
  margin-right: 1em;
}
.calc-text-container {
  flex: 0 0 0;
  background: rgba(20,200,0,0.8);
}

<div class="calc">
  <a href="#">
    <div class="calc-icon-container"><span class="calc-icon"></span></div>
	<div class="calc-text-container"><span class="calc-text">To do something megagiga</span></div>
  </a>
</div>

Answer 1

只需弯曲：0 0 0;我会做的。

return <div>
   ...
       </div>

class Pokemon extends React.Component {
  render() {
    const {pokemon, id} = this.props;
    return(
      <div className="pokemon--spacies">
        <div className="pokemon--spacies--container">
          <div className="pokemon--spacies--sprite">
            <img src={`/public/sprites/${id}.png`} />
          </div>
          <div className="pokemon--spacies--name"> {pokemon.name }</div>
        </div>
      </div>);
  }
}

Flex项目与儿童相同的宽度

1 个答案: