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