Flexbox，压缩其他内联元素以显示100％悬停元素

Question

下面，我使用flexbox排列了4个元素。我让它工作，以便当我将鼠标悬停在其中一个元素上时，它会使该元素100%并压缩其他元素。

我遇到的问题是转换无法正常运行。

＆＃13;

＆＃13;

.container {
  display: flex;
}

.container div {
  flex-grow: 1;
  height: 50px;
  background-color: red;
  border-left: 2px solid #777;
  border-right: 2px solid #777;
  transition: all .2s;
}

.container div:nth-of-type(1) {
  background-color: blue;
}
.container div:nth-of-type(2) {
  background-color: red;
}
.container div:nth-of-type(3) {
  background-color: orange;
}
.container div:nth-of-type(4) {
  background-color: yellow;
}

.container div:hover {
  width: 100%;
}

＆＃13;

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

有没有人知道使用此flexbox示例进行转换的方法？

Answer 1

为flex-basis

设置动画

虽然这对IE不起作用，但是需要使用width

＆＃13;

＆＃13;

.container {
  display: flex;
}

.container div {
  flex-grow: 1;
  flex-basis: 0;
  overflow: hidden;            /* added so any content hides */
  height: 50px;
  background-color: red;
  border-left: 2px solid #777;
  border-right: 2px solid #777;
  transition: flex-basis .5s;
}

.container div:nth-of-type(1) {
  background-color: blue;
}
.container div:nth-of-type(2) {
  background-color: red;
}
.container div:nth-of-type(3) {
  background-color: orange;
}
.container div:nth-of-type(4) {
  background-color: yellow;
}

.container div:hover {
  flex-basis: 100%;
}

＆＃13;

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我意识到我只需要设置一个定义宽度。

问题是它试图转换到100%宽度而不知道从过渡的内容。

将宽度设置为0px或0%可修复过渡动画。

注意* 如果您正在寻找IE 10＆amp; 11支持。上述flex-basis解决方案不适用于IE。

.container {
  display: flex;
}

.container div {
  flex-grow: 1;
  height: 50px;
  background-color: red;
  border-left: 2px solid #777;
  border-right: 2px solid #777;
  width: 0px;
  transition: all .2s;
}

.container div:nth-of-type(1) {
  background-color: blue;
}
.container div:nth-of-type(2) {
  background-color: red;
}
.container div:nth-of-type(3) {
  background-color: orange;
}
.container div:nth-of-type(4) {
  background-color: yellow;
}

.container div:hover {
  width: 100%;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>