flex布局两端固定其他自适应

最新推荐文章于 2023-03-20 11:42:11 发布

码农小权权

最新推荐文章于 2023-03-20 11:42:11 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/qq_40280730/article/details/116045415

版权

.box {
      width: 100%;
      /* overflow-x: scroll; */
      display: flex;
    }

    .item {
      width: 0%;
      flex: 1;
      height: 50px;

    }

    .item1 {
      width: 20px;
      height: 50px;

    }

    .item2 {
      width: 20px;
      height: 50px;

    }
  </style>
</head>
<div class="box">
  <div class="item1" style="background-color: red">111</div>
  <div class="item" style="background-color: blue">111</div>
  <div class="item" style="background-color: black">111</div>
  <div class="item" style="background-color: green">111</div>
  <div class="item" style="background-color: pink">111</div>
  <div class="item2" style="background-color: yellow">111</div>
</div>

<body>

优惠劵

码农小权权

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局两端固定其他自适应

.box { width: 100%; /* overflow-x: scroll; */ display: flex; } .item { width: 0%; flex: 1; height: 50px; } .item1 { width: 20px; height: 50px; } .item2 { width: 20px;
复制链接

扫一扫