css Flexbox - 照片网格

Posted 2021-05-13

<div class="container">
  <div class="grid">
   <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image">
   <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image">
   <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image">
   <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image">
   <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image">
   <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image">
  </div>
</div>

.container {
    display: flex;
    justify-content: center;
    padding: 5px;
    width: 100%;
    border: 1px solid orange;
}
.grid {
  border: 1px solid blue;
  width: 1886px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.item {
     margin: 5px;
}