将兄弟姐妹推出视野，同时保持其宽度

Question

当悬停在弹性元素上时，我现在将 flex-basis 设置为 100%。在执行此操作时，所有兄弟姐妹的宽度都调整为 0（我认为），这在动画中显示。

是否有可能（最好是 css）让这些同级保持它们的宽度（同级的 nr 是可变的，所以在某些情况下会有比下面的示例更多的列）而元素是悬停在扩大到 100% 宽度？这样看起来它们就好像被推出容器而不是调整到 0 的宽度。

现在是这样工作的：https://jsfiddle.net/luffyyyyy/y8p9g2bs/8/

.container {
    width: 100vw;
    height: 60vh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.day-container {
    flex: 1; 
    display: flex;
    flex-direction: column;
    transition: flex-basis 1000ms ease-in-out;
}

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

Answer 1

这是我得到的最远的距离，但我相信要正确居中，您必须使用 Javascript:

https://jsfiddle.net/xum8va4t/

它的工作原理是添加第二个 flexbox 包装器，它像 day-container

一样在悬停时生长

Answer 2

这是目前所能达到的。但是要使其工作，您必须知道同级元素的数量，在您的情况下为 .day-container。因此，从您的 jsfiddle 中共有 5 个 .day-container 元素，因此 100/5 = 20% 应该是 .day-container 元素的 flex-bases。

现在，当 .container 在 general sibling selector '~'。这是代码：

.container:hover .day-container:not(:hover) {
  margin-left: -20%;
}

.container:hover .day-container:hover ~ .day-container {
  margin-left: 0;
}

最后，将 transition 更改为 all 以便一切顺利进行。
最终代码应该是这样的：

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 60vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.day-container {
  flex: 1 0 20%;
  display: flex;
  flex-direction: column;
  transition: all 1000ms ease-in-out;
}

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

.item.small {
  flex: 1;
  background-color: royalblue;
}

.item.medium {
  flex: 2;
  background-color: rebeccapurple;
}
.item.big {
  flex: 3;
  background-color: goldenrod;
}

.container:hover .day-container:not(:hover) {
  margin-left: -20%;
}

.container:hover .day-container:hover ~ .day-container {
  margin-left: 0;
}

将兄弟姐妹推出视野，同时保持其宽度

Push siblings out of view while keeping their width

css

transition

flexbox