Flexbox：填充单击的行，并在下方/上方包裹元素以填充空间

Question

我试图建立一个响应式网格，以便当您单击网格项目时，它会填充其行的水平空间，并将其他项目推到其上方或下方。填充剩余的空白空间。

这是我当前的代码，它确实填满了行，但留有空白。

JSFIDDLE

$(".box").click(function() {
  $(this).toggleClass("enlarge");
});

body {
  margin: 0;
}

.enlarge {
  flex-basis: 100% !important;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.boxes .box {
  flex-basis: calc((100% / 3) - 2rem);
  margin: 1rem;
  height: 200px;
  box-sizing: border-box;
  text-align: center;
  transition: all 1s;
  background-color: rgb(220, 220, 220);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 1

尝试一下...

$(".box").click(function(){
    $('.box').removeClass("enlarge");
    $(this).toggleClass("enlarge");
});

body {
    margin: 0;
}

.enlarge {
    flex-basis: 100% !important;
}

.boxes {
    display: flex;
    flex-wrap: wrap;
}
 .box {
        flex-basis: calc((100% / 3) - 2rem);
        flex-grow:1;
        display:flex;
        margin: 1rem;
        height: 200px;
        box-sizing: border-box;
        text-align: center;
        transition: all 1s;
        background-color: rgb(220, 220, 220);
        align-items:center;
        justify-content:center;

    }

<div class="boxes">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>