是否可以根据css中最长的元素设置兄弟元素的宽度

Question

我有一个请求，将按钮的宽度设置为一排按钮中最长的同级按钮。

规则：

1. 按钮位于一行的列中
2. 按钮内容决定按钮的宽度。
3. 最长的按钮应该设置其他兄弟按钮的宽度

我尝试过将flex: 1 与max/min-width 一起使用，但这会违反规则2。我可以在js 中轻松做到这一点，我想知道是否可以仅在css 中使用？

https://codepen.io/matthewharwood/pen/JvoVzE?editors=1100

.link {
  height: 49px;
  padding: 0 24px;
  margin-right: 20px;
  background: pink;

  a {

    display: flex;
    align-items: center;
    line-height: 49px;
    justify-content: center;
  }
}


.container {
  width: 70%;
  margin: 0 auto;
  background: papayawhip;
  padding: 30px;
  display: flex;
}

.container2 {
  width: 70%;
  margin: 0 auto;
  background: orange;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
}

.container3 {
  width: 70%;
  margin: 0 auto;
  background: honeydew;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
}

<div class="container">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> secondary button</span></a>    
  </div>
</div>

<div class="container2">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> secondary button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> third button</span></a>    
  </div>
</div>


<div class="container3">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> 2 button</span></a>    
  </div>
</div>

Answer 1

重要提示：以下解决方案是hack。

这里的想法是依靠方向列和inline-flex 使所有元素的宽度相等（最长的一个），然后我使用转换来恢复行方向。

^{我知道这是一个糟糕的 hack}

.link {
  height: 49px;
  padding: 0 24px;
  background: pink;
  border:1px solid;
}
 

.container {
  padding: 30px;
  display: inline-flex;
  flex-wrap:wrap;
  flex-direction:column;
}
.link:nth-child(2) {
  transform:translate(100%,-100%);
}
.link:nth-child(3) {
  transform:translate(200%,-200%);
}
.link:nth-child(4) {
  transform:translate(300%,-200%);
}

<div class="container">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> secondary button</span></a>    
  </div>
</div>
<br>
<div class="container">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> secondary button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> third button</span></a>    
  </div>
</div>
<br>
<div class="container">
  <div class="link">
    <a href=""><span> 1 button</span></a>    
  </div>
  <div class="link">
    <a href=""><span> 2 button</span></a>    
  </div>
</div>