CSS - 打破网格元素并在列中拉伸到最宽

Posted 2023-03-06

【中文标题】CSS - 打破网格元素并在列中拉伸到最宽

【英文标题】：CSS - Break grid elements and stretch to widest in column

【发布时间】：2021-02-25 09:25:07

【问题描述】：

我有一排有两个按钮，一个比另一个宽。如果视口变得太小，按钮应该“中断”，这意味着它们位于一列中。在这种情况下，较小的按钮应将其宽度拉伸到较宽按钮的宽度。

我准备了一个模拟我当前立场的代码笔：

.outer 
  display: flex;
  justify-content: center;


.inner 
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(min-content, max-content));
  grid-gap: 16px;


button 
  border: none;
  background: transparent;
  padding: 10px 48px;


.stroke 
  border-bottom: 2px solid black;


.flat 
  background: black;
  color: white;

<div class="outer">
  <div class="inner">
    <button class="stroke">
      <span>WIDER BUTTON</span>
    </button>
    <button class="flat">
      <span>BUTTON</span>
    </button>
  </div>
</div>

https://codepen.io/simonmeier/pen/xxOMKQg

按钮中的文本是动态的，这意味着我不知道里面会有什么，所以“硬编码”宽度不起作用。

普通的 (s)css 可以做到这一点吗？

提前致谢。

【参考方案1】：

您可以在容器上使用 flex 而不是 inline-grid。

然后通过应用flex-wrap: wrap;，如果不合适，内容将自动换行到下一行。

将flex-grow: 1; 放在较小的按钮上，这样按钮就会变大以适应容器。

.outer 
  display: flex;
  justify-content: center;


.inner 
  display: flex;
  flex-wrap: wrap;
  margin: 0 -16px;


button 
  border: none;
  background: transparent;
  padding: 10px 48px;
  margin: 0 16px;


.stroke 
  border-bottom: 2px solid black;
  width: 300px;


.flat 
  background: black;
  color: white;
  width: 200px;
  flex-grow: 1;

<div class="outer">
  <div class="inner">
    <button class="stroke">
      <span>WIDER BUTTON</span>
    </button>
    <button class="flat">
      <span>BUTTON</span>
    </button>
  </div>
</div>

【讨论】：

工作正常，直到它坏了。 flex-grow: 1 的按钮延伸到视口的整个宽度，在我从 .flat 和 .stroke ...一个选项，因为我不知道文本会是什么

【参考方案2】：

解决方案可以使用flex-wrap: wrap 将.inner 中的display 属性更改为flex，并将flex: 1 1 auto; 更改为您的button。

如果您想对布局进行更多控制，请考虑使用@media queries。

.outer 
    display: flex;
    justify-content: center;


.inner 
    /*display: inline-grid;
    grid-template-columns: repeat(2, minmax(min-content, max-content));*/
    display: flex;
    flex-wrap: wrap;
    /*grid-gap: 16px;*/

button 
    border: none;
    margin: 8px;
    flex: 1 1 auto;
    background: transparent;
    padding: 10px 48px;


.stroke 
    border-bottom: 2px solid black;


.flat 
    background: black;
    color: white;

<div class="outer">
    <div class="inner">
        <button class="stroke">
            <span>WIDER BUTTON</span>
        </button>
        <button class="flat">
            <span>BUTTON</span>
        </button>
    </div>
</div>