CSS-Flex布局方法

在做js30天挑战的时候，遇到了这样一个页面

效果demo

页面点击前截屏如下

点击后：

我的代码如下：

<div class="panels">
     <div class="panel panel1">
       <p>Hey</p>
       <p>Let's</p>
       <p>Dance</p>
     </div>
     <div class="panel panel2">
       <p>give</p>
       <p>take</p>
       <p>receive</p>
     </div>
     <div class="panel panel3">
       <p>experience</p>
       <p>it</p>
       <p>today</p>
     </div>
     <div class="panel panel4">
       <p>give</p>
       <p>all</p>
       <p>you can</p>
     </div>
     <div class="panel panel5">
       <p>life</p>
       <p>in</p>
       <p>motion</p>
     </div>
   </div>

.panel {
 width: 20%;
 height: 100vh;
 display: flex;
 flex: 1;
}
 
.panel > * {
 margin: 0;
 width: 100%;
 transition: transform 0.5s;
 flex: 1 0 auto;
 align-items: center;
 display: flex;
}
 
.panel.open {
 /* width: 40%; */
 flex: 5;
 font-size: 40px;
}

疑问：为什么这三个flex可以实现点击该栏宽度增加？

.panel {
 flex: 1;
}
.panel > * {
 flex: 1 0 auto;
}
 
.panel.open {
 /* width: 40%; */
 flex: 5;
}

这里需要好好研究一下flex布局方法，首先我们来看下flex的语法：
flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

1. 属性<‘flex-grow’> 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

   如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
   
   
   

因此，当flex.open{flex: 5}时，该flex项目的宽度为其他项目的五倍，此时它的宽度占全屏的5/6. 成功实现布局