526互联

flex 设置宽高常见问题

发布时间 2023-11-07 00:16:07作者: zjy4fun
<html>

<head>
  <title>flex 中设置高度的问题</title>
</head>

<body>
  <!-- 
      1. 容器设置为 flex，设置宽高会有什么影响，父容器和子容器默认宽高是多少
      2. 如果容器宽高使用百分比表示，会有什么不同和影响？
     -->
  <div class="container">
    <div class="item1">
      如果子容器不设置宽高，那么高度占满，宽度根据内容自适应(高度还是宽度自适应，取决于 flex 中的主轴和交叉轴方向)
    </div>
    <div class="item11">
      如果子容器只设置宽度，那么高度占满
    </div>
  </div>
  <div class="container">
    <div class="item2">如果直接父容器已经指定了宽度，那么容器的百分比就是直接百分比，其他表现和指定 px 一样</div>
    <div class="item2">2</div>
  </div>
  <div>
    <div class="item2">如果直接的父容器没有指定宽度，那么子容器宽度百分比对应的是已指定宽度的外层的宽度百分比</div>
    <div class="item2">通过这个例子也能验证 flex 对 width 和 border 的影响</div>
  </div>
</body>

</html>

<style>
  .container {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
    background-color: antiquewhite;

    display: flex;
  }

  .item1 {
    border: 1px red solid;
  }

  .item11 {
    width: 100px;
    height: 100px;
    border: 1px blue solid;
  }
  .item2 {
    width: 50%;
    /* 当父容器指定为 flex，子容器的宽度包含了 border 的宽度 */
    border: 10px pink solid;
  }
</style>