У меня сетка с Flexbox.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.container {
display: flex;
height: 100%;
flex-wrap: wrap;
}
.item {
width: 49%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
transition: all .2s;
}
.item:hover {
flex-grow: 1.2;
}
<div class = "container">
<div class = "item" style = "background: red">a</div>
<div class = "item" style = "background: green">b</div>
<div class = "item" style = "background: blue">c</div>
<div class = "item" style = "background: purple">d</div>
</div>
Я хочу анимировать элементы при наведении: один под курсором увеличивается в ширину и высоту, а остальные растягиваются соответственно. Мне удалось это сделать только в том случае, если применяется flex-direction: column;
, но тогда это уже не сетка:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: wrap;
}
.item {
width: 49%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
transition: all .2s;
}
.item:hover {
flex-grow: 1.2;
}
<div class = "container">
<div class = "item" style = "background: red">a</div>
<div class = "item" style = "background: green">b</div>
<div class = "item" style = "background: blue">c</div>
<div class = "item" style = "background: purple">d</div>
</div>
Как я могу это сделать?
Гибкое увеличение / уменьшение не работает, если вы явно указали высоту / ширину. Ваша версия flex-column
работает, потому что у вас не установлена высота. Удалите .item{width:49%;}
, и горизонтальная версия тоже подойдет.
Если вы хотите обернуть, используйте flex-wrap
и flex-basis:50%
, но это будет делать странные вещи, если они растут / сжимаются.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: wrap;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
transition: all .2s;
}
.item:hover {
flex-grow: 1.2;
}
<div class = "container">
<div class = "item" style = "background: red">a</div>
<div class = "item" style = "background: green">b</div>
<div class = "item" style = "background: blue">c</div>
<div class = "item" style = "background: purple">d</div>
</div>
@Nikita см. Мой ответ для примера
Спасибо @BryceHowitson; но ваш пример - это не сетка, это то же самое, что и моя вторая попытка
Вам нужно, чтобы флексбокс рос, или контент может расти? Трудно что-то порекомендовать, не зная, чего вы пытаетесь достичь с помощью этого макета.
Сделайте ширину по умолчанию ниже. Если вы оставите его больше 33,3%, только 2 элемента будут разделять строку
Добавлено изменение высоты
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.container {
display: flex;
height: 100%;
flex-wrap: wrap;
}
.item {
width: 35%; /* can not go under 33% */
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
transition: all .2s;
}
.item:hover {
flex-grow: 22;
min-height: 50%;
}
.container:hover .item:not(:hover) {
flex-grow: 1;
}
<div class = "container">
<div class = "item" style = "background: red">a</div>
<div class = "item" style = "background: green">b</div>
<div class = "item" style = "background: blue">c</div>
<div class = "item" style = "background: purple">d</div>
</div>
Привет! это здорово, но так высота не растет. Это возможно?
У вас всегда будет 4 предмета? В этом случае см. Отредактированный ответ.
Да, всегда 4 предмета в одном месте.
Нет, элементы не заполняют вертикальное пространство…
@Nikita: Если изменения высоты полностью убрать, вас устроит результат?
Привет, @LionelWong, я не понимаю, что ты имеешь в виду. Идея в том, чтобы сделать что-то вроде это, но только с помощью css.
Изменен сниппет. Проверь сейчас.
Я не уверен, что понимаю вас; можешь привести пример?