CSS - разбить элементы сетки и растянуть до самого широкого в столбце

#html #css #sass

#HTML #css #sass

Вопрос:

У меня есть две кнопки в одной строке, одна шире другой. Если окно просмотра становится слишком маленьким, кнопки должны «ломаться», что означает, что они располагаются в одном столбце. В этом случае меньшая кнопка должна растянуть свою ширину до ширины более широкой кнопки.

Я подготовил codepen, который имитирует мою текущую точку зрения:

 .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

Тексты в кнопках являются динамическими, то есть я не знаю, что там будет, поэтому «жесткое кодирование» ширины не работает.

Возможно ли это с помощью простого css?

Заранее спасибо.

Ответ №1:

Вы могли бы использовать flex в своем контейнере вместо встроенной сетки.

Затем при применении 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>

1. Работает нормально, пока не сломается. Кнопка с flex-grow: 1 растягивается на всю ширину окна просмотра после того, как я удалил width from . плоский и .stroke … как я уже говорил в вопросе, установка ширины кнопки не является вариантом, поскольку я не знаю, каким будет текст

Ответ №2:

Решением может быть flex-wrap: wrap изменение display свойства на flex in .inner и flex: 1 1 auto; на your button .

Если вы хотите больше контролировать свой макет, рассмотрите возможность использования запросов @media .

Показать фрагмент кода

 .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>