flex布局一行三个,显示多行

效果:
flex布局一行三个,显示多行_第1张图片
代码

 <div class="co-middle">
      <div class="img-btn">
        <img src="../../../assets/images/ml5DisSelect/blueBtn.png" alt="" />
        <div class="img-title oneBtn">Pre Task Dispatchdiv>
      div>
      <div class="img-btn">
        <img src="../../../assets/images/ml5DisSelect/qBlueBtn.png" alt="" />
        <div class="img-title twoBtn">Line Prep DispatchHdiv>
      div>
      <div class="img-btn">
        <img src="../../../assets/images/ml5DisSelect/poBtn.png" alt="" />
        <div class="img-title threeBtn">Outside Shelf Dispatchdiv>
      div>
      <div class="img-btn">
        <img src="../../../assets/images/ml5DisSelect/greenBtn.png" alt="" />
        <div class="img-title fourBtn">Warehouse Dispatchdiv>
      div>

      <div class="img-btn">
        <img src="../../../assets/images/ml5DisSelect/sBlueBtn.png" alt="" />
        <div class="img-title fiveBtn">NPI Dispatchdiv>
      div>
    div>
    
    <style>
        .co-middle {
         display: flex;
         flex-wrap: wrap
         clear: both;
         margin: 25px;
         ;
}
        .img-btn {
          margin-bottom: 20px;
          width: 33.33%;
}
    style>

你可能感兴趣的:(前端,html,display:flex)