CSS拖拽布局是一種非常實用的技術，可以讓網頁實現拖拽并自動調整布局的效果。而撐開盒子則是實現頁面自適應高度的一個重要步驟。

下面是一個例子：

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.box1, .box2, .box3 {
width: 30%;
margin-right: 5%;
margin-bottom: 20px;
background-color: #f2f2f2;
border: 1px solid #ddd;
cursor: move;
}
.box1:hover, .box2:hover, .box3:hover {
background-color: #eee;
}
</style>

這段代碼實現了一個拖拽布局的效果，但是如果我們看一下頁面，會發現盒子的高度無法自適應。

這時候，就需要使用撐開盒子的技巧了。具體而言，就是讓父元素的高度自適應子元素的高度。

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.box1, .box2, .box3 {
width: 30%;
margin-right: 5%;
margin-bottom: 20px;
background-color: #f2f2f2;
border: 1px solid #ddd;
cursor: move;
}
.box1:hover, .box2:hover, .box3:hover {
background-color: #eee;
}
.container::after {
content: "";
flex: auto;
}
</style>

我們在容器上加上一個::after偽元素，并設置flex:auto，就可以自適應盒子的高度了。

以上就是關于CSS拖拽布局撐開盒子的介紹，希望對大家有所幫助。