css - rails : Upload images and align as a gallery

Question

我正在从我开发的 Rails 应用程序上传图片，在 edit form 中，当前上传的图片仅显示在一行中:

这是我的设置:

 <div class="container-image">
       <% @attachments.each do |attachment| %>
    <div class="item-image">
      <div class="pinImage">
            <%= image_tag(attachment.image.url(:mini))%>
        <p style="font-size: 13px;">
                <%= link_to "Remove", remove_item_attachment_path(attachment),
                            data: { confirm: "Are you sure?"},
                            :method => :delete %></p>
            </div>
          </div>
       <% end %>
      </div>

这是CSS:

.pinImage img
  width: 100%
  height: auto
  border: 1px solid #d9d9d9
  border-radius: 6px
  background-color: white


.container-image
  max-width: 1200px
  display: flex
  align-items: center
  -webkit-justify-content: center
  /* Safari */
  justify-content: center


.item-image
  padding: 5px
  display: block

但我希望图像像下面这样对齐显示为图库。知道如何解决这个问题吗？

Answer 1

试试这个更新后的 CSS。添加了 flex-wrap: wrap; 并从 container-image div 中删除了 justify-content:center。同时从正文中删除默认边距。

 
body {
  margin: 0;
}
.pinImage img {
  width: 100%;
  height: auto;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background-color: white;
}

.container-image{
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.item-image{
display: block;
  width: 25%;
  }

 <div class="container-image">
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
   <div class="item-image">
      <div class="pinImage">
         <img src=""/>
         <p style="font-size: 13px;">
            delete
         </p>
      </div>
   </div>
</div>