弹性布局(Flexible Box)，是由W3C提出的CSS布局的模型，提供了更加灵活高效的方式来布置、对齐和分配容器内项目的空间，特别是响应式和动态用户界面中，解决了传统布局方式浮动float:left; 和定位在复杂布局需求面前的局限，特别是对不同屏幕尺寸和方向变化的适应。

实战手风琴基本思路与代码实现

当你的leader给你一个这样的小效果需要你去实现，你会怎么样来构思呢？

手风琴_-_Google_Chrome_2024-06-01_21-47-49.gif

1、首先我们肯定要用六个盒子来装这些“琴键”，它们像列表一样排列，所有可以用ul、li来放图片，或者可以设置背景图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <div class="container">
        <ul class="accordion">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

2、我们对这些列表设置一些宽高以及做一些reset，让margin、padding都“初始化”为0

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
.container {
  background-color: #d8d8d8;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-items: center;
}
.accordion {
  text-align: center;
  display: flex;
  height: 400px;
  width: 100%;
}
.accordion li {
  flex: 1;
  width: 300px;
  cursor: pointer;
  line-height: 200px;
  text-align: center;
  color: #fff;
  background-size: cover;
}
.accordion li:nth-child(1) {
  background-color: #f66;
}
.accordion li:nth-child(2) {
  background-color: #66f;
}
.accordion li:nth-child(3) {
  background-color: #f90;
}
.accordion li:nth-child(4) {
  background-color: #09f;
}
.accordion li:nth-child(5) {
  background-color: #9c3;
}
.accordion li:nth-child(6) {
  background-color: #3c9;
}

3、display:flex;的使用

（1）当你给一个容器加上display:flex;属性时，这就意味着它的子容器们，将会来到一个新的弹性格式化上下文。

（2）在父容器上设置justify-content和align-items属性,值为center，就可以分别在主轴方向（默认水平）、侧轴方向（默认竖直）达到居中效果，主轴方向可以通过flex-direction来修改。

（3）父容器设置弹性布局后，子容器就可以设置flex来控制空间分配。flex是flex-grow、flex-shrink和flex-basis三个属性的简写。

(4)flex计算：

flex-grow: 定义了项目在容器有多余空间时如何增长。其值是一个无单位的数字，表示项目的扩展比率。默认值为0，意味着项目不会增长。
flex-shrink: 定义了项目在容器空间不足时如何缩小。同样是一个无单位的数字，表示收缩比率。默认值为1，意味着项目可以缩小。
flex-basis: 定义了在分配多余空间之前，项目的初始大小。可以是auto、content、一个长度单位（如px、em、%等）或0。默认值为auto，意味着项目基于其内容的大小计算其初始大小。

例如：我们将六个琴键的flex设为1，它们就会等比例的划分它们父容器的空间。

（4）设置“手风琴”效果

当我们鼠标移去某个li上时，它就会像变宽了一样。我们可以在每个li上添加:hover伪类，当鼠标悬停时，修改它的flex为2，让它能分到父容器更多的空间，就可以达到变宽的效果，然后给每个li换上专属的背景图片。

.accordion li:hover {
  flex: 2;
}
.accordion li:nth-child(1):hover {
  background-image: url("./image/1.webp");
}
.accordion li:nth-child(2):hover {
  background-image: url("./image/2.webp");
}
.accordion li:nth-child(3):hover {
  background-image: url("./image/3.webp");
}
.accordion li:nth-child(4):hover {
  background-image: url("./image/4.webp");
}
.accordion li:nth-child(5):hover {
  background-image: url("./image/5.webp");
}
.accordion li:nth-child(6):hover {
  background-image: url("./image/6.webp");
}

最后，给li加上transition: flex 0.5s;属性，让CSS个属性值改变的更加平滑，当flex改变时，这个过程持续时间为0.5s。

完整的代码可以参考我的gitee仓库。--gitee.com/wei-forest/…

Html+CSS实战手风琴，感受弹性布局的魅力

实战手风琴基本思路与代码实现