flex-wrap属性值的基本效果示意实例页面

展示

代码

• HTML：

  <h4>默认值nowrap</h4>
  <div class="container">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
      <div><img src="wallpaper-2.jpg"></div>
  </div>
  <h4>默认值nowrap+图片max-width:100%</h4>
  <div class="container max-width">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
      <div><img src="wallpaper-2.jpg"></div>
  </div>
  <h4>wrap</h4>
  <div class="container wrap">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
      <div><img src="wallpaper-2.jpg"></div>
  </div>
  <h4>wrap-reverse</h4>
  <div class="container wrap-reverse">
      <div><img src="nature-7.jpg"></div>
      <div><img src="wallpaper-3.jpg"></div>
      <div><img src="nature-8.jpg"></div>
      <div><img src="wallpaper-2.jpg"></div>
  </div>

• CSS：

  .container {
      display: flex;
      outline: 1px dotted;
  
      counter-reset: index;
  }
  .container > div {
      background: radial-gradient(circle, white, deepskyblue);
  }
  .container > div::before {
      counter-increment: index;
      content: counter(index);
      background-color: #cd0000;
      background-clip: content-box;
      color: #fff;
      position: absolute;
      border-radius: 50%;
      width: 22px;
      border: solid transparent;
      text-align: center;
      line-height: 22px;
  }
  .max-width img {
      max-width: 100%;
  }
  .wrap {
      flex-wrap: wrap;
  }
  .wrap-reverse {
      flex-wrap: wrap-reverse;
  }