Анимация сетки Flexbox с помощью Flexbox

У меня сетка с 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>

Как я могу это сделать?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
858
2

Ответы 2

Гибкое увеличение / уменьшение не работает, если вы явно указали высоту / ширину. Ваша версия 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>

Я не уверен, что понимаю вас; можешь привести пример?

user7499416 30.10.2018 22:59

@Nikita см. Мой ответ для примера

Bryce Howitson 30.10.2018 23:28

Спасибо @BryceHowitson; но ваш пример - это не сетка, это то же самое, что и моя вторая попытка

user7499416 30.10.2018 23:44

Вам нужно, чтобы флексбокс рос, или контент может расти? Трудно что-то порекомендовать, не зная, чего вы пытаетесь достичь с помощью этого макета.

Bryce Howitson 31.10.2018 16:44

Сделайте ширину по умолчанию ниже. Если вы оставите его больше 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>

Привет! это здорово, но так высота не растет. Это возможно?

user7499416 31.10.2018 15:11

У вас всегда будет 4 предмета? В этом случае см. Отредактированный ответ.

vals 31.10.2018 16:46

Да, всегда 4 предмета в одном месте.

user7499416 31.10.2018 22:04

Нет, элементы не заполняют вертикальное пространство…

user7499416 01.11.2018 14:09

@Nikita: Если изменения высоты полностью убрать, вас устроит результат?

LionelW 02.11.2018 02:25

Привет, @LionelWong, я не понимаю, что ты имеешь в виду. Идея в том, чтобы сделать что-то вроде это, но только с помощью css.

user7499416 02.11.2018 12:03

Изменен сниппет. Проверь сейчас.

vals 02.11.2018 12:43

Другие вопросы по теме