如何拉伸 flex child 以使背景颜色与兄弟姐妹的高度匹配

Posted 2023-03-05

【中文标题】如何拉伸 flex child 以使背景颜色与兄弟姐妹的高度匹配

【英文标题】：How to stretch flex child so that background color matches the height of sibling

【发布时间】：2017-06-16 20:15:54

【问题描述】：

我在li 中有两个链接，一个带有可短可长的文本，另一个是图标。图标的background-color 应与文本链接的高度匹配，而文本应具有定义的填充。它不一定是 flexbox，我只是认为它应该更容易。

http://codepen.io/anon/pen/GrQZKN

li 
  display: flex;
  justify-content: space-between;
  align-items: center;
  .first 
    background-color: #333;
    padding: 20px;
    color: #fff;
    flex: 1;
  
  .second 
    background-color: orange;
    align-items: stretch;
    display: flex;
  


<ul>
  <li>
    <a href="#" class="first">Link</a>
    <a href="#" class="second">(icon)</a>
  </li>
  <li>
    <a href="#" class="first">Longer LongerLonger Longer link</a>
    <a href="#" class="second">(icon)</a>
  </li>
</ul>

【参考方案1】：

您只需执行以下操作：

从li 中删除align-items: center（用于拉伸second）

在li.second 中将align-items: stretch 替换为align-items: center（用于垂直对齐）

请看下面的演示：

body 
  max-width: 300px;
  background-color: #ddd;


li 
  display: flex;
  justify-content: space-between;
  /*align-items: center;*/
  border-bottom: 1px solid #eee;

li .first 
  background-color: #333;
  padding: 20px;
  color: #fff;
  flex: 1;

li .second 
  background-color: orange;
  align-items: center; /*CHANGED THIS*/
  display: flex;

<ul>
  <li>
    <a href="#" class="first">Link</a>
    <a href="#" class="second">(icon)</a>
  </li>
  <li>
    <a href="#" class="first">Longer LongerLonger Longer link</a>
    <a href="#" class="second">(icon)</a>
  </li>
</ul>