在網頁設計中，如何讓元素的寬度自適應可實現CSS代碼的上下自動適應？下面，我們來介紹具體的實現方法。

.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.header {
height: 100px;
background-color: #eee;
}
.content {
flex-grow: 1; /*設置主內容區域為自適應*/
background-color: #f5f5f5;
}
.footer {
height: 50px;
background-color: #eee;
}

上述代碼中，我們首先在父容器（容器container）中應用了flex布局，設置了其主軸方向為縱向（flex-direction: column），并將子元素豎直方向上（justify-content: space-between）均勻分布，使得所有子元素在可用空間中自適應垂直方向的大小。

對于具體的子元素，我們設置了三個不同高度（header、content、footer）的塊級元素，其中中間的content使用了flex-grow屬性，通過把值設為1，讓它沾滿父容器剩余的可用空間。這樣一來，content元素的高度就會自適應其所在容器的高度，從而實現整體上下自適應。

上述方法不僅易于實現，而且也十分適用于對于支持Flex布局的現代瀏覽器，同時也兼容很多舊版瀏覽器。