我正在尝试将 flexbox 从大多数事物自动调整大小的“自动”状态设置为其中一个事物调整大小的状态。
|auto|this fills most space |auto|
to
|auto|this...|auto |
演示:http://codepen.io/kaaaahhhhnnnn/pen/vOJpwo
当你悬停时，你会看到我想要的。如果您删除 CSS 中的注释:
li
// flex 1
您会看到它现在具有动画效果，但尺寸不是我想要的。
问题是我无法弄清楚如何在存在 flex 属性的情况下获得第一个状态，如果没有它我也无法弄清楚如何获得第二个状态。所以我无法在两者之间设置动画。
最佳答案
关于 flex 的文档简写是
flex |none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
哪里flex-basis是:
flex-basis | content | <‘width’> and the initial value : auto;
flex-basis 是否可以设置动画？
Animatable: as width
因此，根据规范，此属性只能作为宽度进行动画处理。
Auto 与其内容相同。此属性不可设置动画。
关于css - 从 "auto"动画 flexbox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30866317/