flex弹性伸缩比 - 前端教程

admin

flex弹性伸缩比

<title>flex布局-弹性伸缩比</title>
  <style>
    /* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
    .box {
      display: flex;
      flex-direction: column;

      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      /* height: 100px; */
      background-color: pink;
    }

    .box div:nth-child(1) {
      width: 200px;
    }

    .box div:nth-child(2) {
      flex: 1;
    }

    .box div:nth-child(3) {
      flex: 2;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
复制代码

		自动登录	找回密码
密码			立即注册

flex弹性伸缩比 [复制链接]

0 回复

浏览过的版块

admin