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

码农小权权

于 2021-04-23 10:36:29 发布

阅读量358

点赞数

本文链接：https://blog.youkuaiyun.com/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>