Отзывчивая сетка CSS Flex
С этими настройками элементы плавно адаптируются при изменении размера экрана, переносясь вниз, когда пространство становится тесным, и расширяясь, чтобы занимать доступное пространство
HTML:
CSS:
Полный код — Codepen
👉 @FrontendPortal | #CSS
С этими настройками элементы плавно адаптируются при изменении размера экрана, переносясь вниз, когда пространство становится тесным, и расширяясь, чтобы занимать доступное пространство
HTML:
<form>
<input type="text">
<input type="text">
<button>Subscribe</button>
</form>
CSS:
form {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
input {
flex: 1 0 130px;
}
button {
flex: 1 0 40px;
}Полный код — Codepen
👉 @FrontendPortal | #CSS