使用Flexbox的Flexbox网格动画

Question

我有一个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>

​

我该怎么做呢？

Answer 1

当你有一个明确的高度/宽度设置时，弹性增长/收缩不起作用。您的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>

​

Answer 2

使您的默认宽度更小。如果您保持它大于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>

​