m0_46602893 2021-03-23 19:10 采纳率: 91.5%
浏览 43
已结题

flex弹性布局问题

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .box{border: 1px solid black;width: 300px;height: 300px;margin: 50px auto;border-radius: 5px;
                 display: flex;flex-wrap: wrap;
            }
            /* i{display: block;width: 30%;height: 30%;background: black;border-radius: 50%;} */
            .box1,.box2,.box3{width: 100%;}
      </style>
</head>
<body>
      <div class="box">
            <div class="box1">
                  <i></i>
                  <i></i>
            </div>
            <div class="box2">
                  <i></i>
            </div>
            <div class="box3">
                  <i></i>
                  <i></i>
            </div>
      </div>
</body>
</html>

问题一:

在这个代码里面,当我不给box设置display: flex;的时候,这个时候我要给box1,2,3用百分比设置宽高的时候必须宽高都要设置div才能显示出来,而当我给box设置display: flex;的时候,这个时候为什么只用设置width=100%高度自己就出来了?并且height是100%?而width自动就变成了原来的三分之一?

问题二:

当我给box设置display: flex;并且flex-wrap: wrap;height在之前没有设置的情况下自动变成了原来的三分之一?

  • 写回答

1条回答 默认 最新

  • 土拨鼠1号 2021-03-24 10:34
    关注

    设置了display: flex后,box的所有子元素自动成为容器成员,加上你设置了flex-wrap: wrap,它就会自动排序成如下图所示的形式

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 9月4日
  • 已采纳回答 8月27日

悬赏问题

  • ¥20 qt中connect两个signal
  • ¥20 pix2pixHD运行测试命令时出现数据类型错误无法反向传播的问题
  • ¥15 python处理Excel符合条件的行自动填写数据分类
  • ¥15 汇编hook举例并讲解(通俗易懂,学习用)
  • ¥20 用c++语言模拟键盘电子琴设计
  • ¥15 STM32cubemx生成keil工程,有问题与正常的情况不同,求解!
  • ¥15 如何自动点击银行app的安全键盘,实现密码自动输入
  • ¥15 关于四边形重叠的问题
  • ¥15 用verilog语言设计一个简易的八音符电子琴,可通过按键输入来控制音响。演奏时可以选择是手演奏(由键盘输入)或自动演奏已存入的乐曲。能够自动演奏多首乐曲,且每首乐曲可重复演奏
  • ¥15 sap gui脚本每次到导出Excel的时候就停住不动。不会另存为。