具有适合动态宽度和高度元素的网格/弹性盒布局

Question

我尝试使用flexbox 创建一个具有一个中心元素的网格，例如图像。 f square 有 active 类，其中我将宽度和高度加倍。这有可能使其他方格适合其余方格吗？我应该使用 flexbox 或者 grid？

接下来我想用click 事件添加监听器。点击方块会将其移动到中心位置并添加active类并在此移动中添加过渡（不能使用gird??）

。

这是我的笔：link

Answer 1

要获得此布局，您可以使用 CSS 网格布局。您可以在网格模板的列和行上设置repeat(4, 100px)。对于 active 框，您可以在 grid-row 和 grid-column 上使用 2 / 4，这样带有 active 类的框将始终位于布局的中间。对于间距，您可以使用grid-gap

$(".wrapper .box").click(function() {
  $(this).addClass('active').siblings().removeClass('active')
})

body {
  margin: 40px;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-gap: 10px;
}
.box {
  background: #444444;
  color: white;
  padding: 5px;
  box-sizing: border-box;
  font-size: 30px;
  cursor: pointer;
}
.box:not(.active):hover {
  transition: background 0.3s ease-in;
  background: orange;
}
.active {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box a">a</div>
  <div class="box b">b</div>
  <div class="box c">c</div>
  <div class="box d">d</div>
  <div class="box e">e</div>
  <div class="box f active">f</div>
  <div class="box g">g</div>
  <div class="box h">h</div>
  <div class="box i">i</div>
  <div class="box i">j</div>
  <div class="box i">k</div>
  <div class="box i">l</div>
  <div class="box i">m</div>
</div>