HTML5 盒子布局代碼是前端開發中常用的一種網頁布局方式。盒子布局旨在更輕松地實現靈活、可重用、可維護的網頁布局，以適應各種設備和屏幕尺寸。

以下是一個簡單的 HTML5 盒子布局代碼示例：

<!-- HTML 代碼 -->
<div class="container">
<div class="header">頭部區域</div>
<div class="content">內容區域</div>
<div class="sidebar">側邊欄區域</div>
<div class="footer">底部區域</div>
</div>
<!-- CSS 代碼 -->
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.header, .content, .sidebar, .footer {
flex-basis: 100%;
}
@media screen and (min-width: 600px) {
.header, .footer {
flex-basis: 100%;
}
.content {
flex-basis: 60%;
}
.sidebar {
flex-basis: 35%;
}
}
@media screen and (min-width: 900px) {
.header, .footer {
flex-basis: 25%;
}
.content {
flex-basis: 50%;
}
.sidebar {
flex-basis: 25%;
}
}

上述代碼定義了一個具有頭部、內容區域、側邊欄和底部的容器。在 CSS 中，我們使用display: flex;屬性來將其設置為 flex 容器，并使用flex-wrap: wrap;屬性實現自動換行。

然后，我們定義每個子元素的初始寬度（名稱為 flex-basis）為 100%。隨后，我們使用各種媒體查詢來調整子元素的寬度和布局，以適應不同的設備寬度。

總之，HTML5 盒子布局代碼是前端開發中必不可少的一部分，適用于各種網頁布局，包括響應式設計。通過靈活使用 HTML5 盒子布局代碼，您可以創建出優雅、可重用的網頁設計。