Flexbox 在锚点内生长

debugcn 发表于 Dev

艾伦·苏扎

我正面临一个问题，我希望锚点 flexbox 子项占据所有可用的剩余高度。我认为添加flex-grow: 1就足够了，但它不起作用。锚点内的 div 没有占据整个高度。

问题：有没有办法让它在不将我的普通锚点转换为 flexbox 元素的情况下工作？

这是一个说明问题的代码笔：https ://codepen.io/alansouzati/pen/YVpYeO

我已经创建了 3 个瓷砖，其中第一个有锚点来举例说明。您可以看到价格与其他兄弟姐妹不一致。

迈克尔·科克

.plain不是 flex parent，所以设置flex-grow: 1on.service不会做任何事情。

只需添加display: flex到.plain

.tiles {
  display: flex;
  flex-wrap: wrap;
  background-color: #d3d3d3;
  padding: 12px;
  justify-content: center;
}

.tile {
  display: flex;
  border: 1px solid #333;
  flex-basis: 200px;
  background-color:  white;
  margin: 12px;
  flex-direction: column;
}

.tile:hover {
  background-color:  #f1f1f1;
}

.service {
  display: flex;
  flex-direction: column;
  padding: 12px;
  flex-grow: 1;
}

.service-body {
  flex-grow: 1;
}

p {
  color: #a8a8a8;
}

.plain {
  margin: 0;
  color:inherit;
  text-decoration:none;
  flex-grow: 1;
  display: flex;
}

<div class='tiles'>
  <div class='tile'>
    <a href="http://google.com" class='plain' target="_blank">
      <div class='service'>
        <h2>Service 1</h2>
        <div class='service-body'>
          <p>This is a sample service</p>
        </div>
        <span>$9.99</span>
      </div>
    </a>
  </div>
  <div class='tile'>
    <div class='service'>
      <h2>Service 2</h2>
      <div class='service-body'>
        <p>This is a sample service</p>
      </div>
      <span>$9.99</span>
    </div>
  </div>
  <div class='tile'>
    <div class='service'>
      <h2>Service 3</h2>
      <div class='service-body'>
        <p>This is a sample service with a long text that will make things render differently</p>
      </div>
      <span>$9.99</span>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。