CSS和Flex是現代網頁設計中使用的非常強大的工具。通過它們的組合，我們可以實現許多炫酷的效果和交互功能。本文將介紹如何使用CSS和Flex實現網頁拖拽功能，讓用戶可以自主調整元素的位置和大小，增強網頁的可操作性。

/* CSS樣式 */
.box {
display: flex;
width: 100%;
height: 100%;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: #333;
color: #fff;
font-size: 20px;
text-align: center;
cursor: move;
position: absolute;
}
/* JS代碼 */
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "_header")) {
/* 拖拽區域 */
document.getElementById(elmnt.id + "_header").onmousedown = dragMouseDown;
} else {
/* 整個元素 */
elmnt.onmousedown = dragMouseDown;
}
/* 移動元素 */
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
/* 計算元素位置 */
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* 拖拽結束 */
document.onmouseup = null;
document.onmousemove = null;
}
}
/* 調用拖拽函數 */
dragElement(document.getElementById("item1"));
dragElement(document.getElementById("item2"));

通過上述CSS樣式，我們創建了一個Flex布局的容器，其中每個子元素都被定位為絕對位置，這樣我們才能夠用JS來輕松地移動它們。每個元素都有一個拖拽手柄，我們可以使用它來拖拽元素。

在JS代碼中，我們創建了一個dragElement函數，它接受每個要拖拽的元素作為參數。當用戶點擊拖拽區域時，我們計算出鼠標位置與元素位置之間的差值，并且通過改變元素的位置來移動它。當用戶松開鼠標時，拖拽結束。

這樣我們就可以簡單地使用CSS和Flex實現網頁拖拽功能了。你可以使用這種方法來增加網頁的交互性，讓用戶更加方便地進行操作。