自适应屏幕宽度布局flex

2022-04-12 15:21:01

flex为自适应盒子模型,可实现多个盒子自适应水平宽度布局;此时设置的盒子的width属性失效。

/*css代码*/
.flex-display {
            display: flex;
        }
.flex-box {
            margin: 10px 20px;
            flex: 1;
            height: 35px;
            width: 35px;//此属性失效
            background-color: red;
            font-size: 15px;
            color: #ffffff;
            text-align: center;
        }
  /*html代码*/
  <div class="flex-display">
        <div class="flex-box">1</div>
        <div class="flex-box">2</div>
        <div class="flex-box">3</div>
    </div>

网页端效果
三个盒子自适应此时width属性不生效,该场景广泛应用于多个产品横向排列情况。

  • 作者:Saga Two
  • 原文链接:https://blog.csdn.net/m0_46309087/article/details/106726983
    更新时间:2022-04-12 15:21:01