css 布局問題

圖片描述

實現(xiàn)這種布局，具體細節(jié)是：
1、兩邊對齊，每行排三個。每個方塊寬度 31%，隨著屏幕收縮而變化。
2、灰色的包裹層不能overflow:hidden，因為小方塊需要陰影效果。

用了flex布局，可是最后一行如果是兩個則中間會空一個：
圖片描述

回答

編輯回答

念初

一種是新增加一個盒子，盒子大小和小盒子一樣，然后顏色設(shè)計為透明。
還有一種是不使用justify-content: space-between;改為justify-content: flex-start;
然后對從第二個元素開始，每隔三個寫一個元素選擇器，改變選中元素的margin-left和margin-right;

        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100%;
            height: 400px;
            background-color: red;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
        }
        .son{
            width: 31%;
            height: 100px;
            background-color: blue;
        }
        .son:nth-child(3n+2){
            margin-left: 3.5%;
            margin-right: 3.5%;
            background-color: white;
        }

html

    <div class="wrap">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>

2017年1月31日 12:26

編輯回答

鹿惑

主要就是利用flex布局和:nth-child()選擇器。讓每三個元素占得位置剛好是100%。
樣式

<style>
    .container {
      width: 60%;
      margin: 20px auto;
      border: 1px solid #ccc;
      padding: 20px;
    }
    .content {
      background-color: #ccc;
      width: 100%;
      height: 300px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }
    .content div {
      background-color: aquamarine;
      box-shadow: 2px 2px 5px #666;
      width: 31%;
      height: 100px;
      margin: 10px 0;
    }
    .content div:nth-child(3n+2) {
      margin: 10px 3.5% 10px 3.5%;
    }
  </style>

結(jié)構(gòu)

<body>
  <div class="container">
    <div class="content">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </div>
</body>

效果
圖片描述

2017年11月13日 06:08

編輯回答