Grid/Flexbox 具有适合动态宽度和高度元素的布局
Grid/Flexbox layout with fitting dynamic width and height elements
我尝试用一个中心元素创建一个网格,就像使用 flexbox
的图像一样。 f
正方形有 class active
,其中我将宽度和高度加倍。这有可能使其他方块适合其余方块吗?我应该使用
flexbox
或者 grid
?
接下来我想用 click
事件添加监听器。单击正方形会将其移动到中心位置并添加 active
class 并在此移动中添加过渡(gird
无法完成??)
。
这是我的笔:link
要获得此布局,您可以使用 CSS 网格布局。您可以在网格模板列和行上设置 repeat(4, 100px)
。对于 active 框,您可以在 grid-row
和 grid-column
上使用 2 / 4
,这样带有 class 活动的框将始终位于布局。对于间距,您可以使用 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>
我尝试用一个中心元素创建一个网格,就像使用 flexbox
的图像一样。 f
正方形有 class active
,其中我将宽度和高度加倍。这有可能使其他方块适合其余方块吗?我应该使用
flexbox
或者 grid
?
接下来我想用 click
事件添加监听器。单击正方形会将其移动到中心位置并添加 active
class 并在此移动中添加过渡(gird
无法完成??)
这是我的笔:link
要获得此布局,您可以使用 CSS 网格布局。您可以在网格模板列和行上设置 repeat(4, 100px)
。对于 active 框,您可以在 grid-row
和 grid-column
上使用 2 / 4
,这样带有 class 活动的框将始终位于布局。对于间距,您可以使用 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>