使用弹性盒子实现手风琴菜单效果

弹性盒子是CSS3中的一个比较纠结的东西，之前的版本改了许多次接口，终于现在稍微稳定了。关于弹性盒子的概念网络上一大堆，我就不详细介绍了。它的作用是将容器盒子的空间按一个权重比例分配给子元素，所以可以很容易的实现手风琴菜单效果。

　　下面这个效果就没有使用JavaScript，只使用了一些CSS3特性完成的

<style>
.panel {
  border:1px solid #CCC;
  width:400px;height:300px;
  display:flex;
  flex-flow:row wrap;
}
.panel>div {
  flex:1;width:100px;
  border-left:1px solid #CCC;
  transition:flex 500ms ease;
}
.panel>div:first-child {border:0px;}
.panel>div:hover {flex:5;}
</style>

<div class="panel">
  <div style="background:#FEE;"></div>
  <div style="background:#FFE;"></div>
  <div style="background:#EFE;"></div>
  <div style="background:#EFF;"></div>
  <div style="background:#EEF;"></div>
  <div style="background:#FEF;"></div>
</div>

这个例子已经充分体现出了弹性盒子的特点。当然，低版本浏览器无法兼容上，所以实际用途并不大。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/410

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！