Web实现：flex弹性布局三栏自适应布局上下三栏

本文链接：https://blog.csdn.net/jasmyn518/article/details/124011407

实际使用时有时候需要上下的自适应布局，实现代码如下：
HTML部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./index.css" />
    <title>用 Flex 实现三栏自适应布局</title>
  </head>
  <body>
    <div class="flex-auto">
      <div class="static"></div>
      <div class="flexible"></div>
      <div class="static"></div>
    </div>
  </body>
</html>

CSS部分：

@keyframes expand {
  0% { height:600px; }
  100% { height:400px;}
}

.flex-auto {
  height: 600px;
  display: flex;
  padding: 4px;
  background: #282A35;
  animation: expand 3s alternate infinite both;

  flex-direction: column;
  /*
    flex-direction有四个有效值：
    1.row：即默认值，主轴为水平方向，起点在左端。
    2.row-reverse：主轴为水平方向，起点在右端。
    3.column：主轴为垂直方向，起点在上沿。
    4.column-reverse：主轴为垂直方向，起点在下沿。
  */
}

.flex-auto .static {
  /* 上下两栏高度固定 */
  height: 100px;
  flex: none;
  background: #D5E8D4;
}

.flex-auto .flexible {
  /* 中间栏高度自适应 */
  flex: 1;
  background: #FFF2CC;
}