HTML5彈性布局是一種新興的布局方式，它能夠讓網頁布局更靈活，適應不同的屏幕尺寸。下面是一個HTML5彈性布局的示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5彈性布局示例</title>
<style>
body {
display: flex;
flex-direction: column;
}
header, footer {
padding: 20px;
background-color: #eee;
}
section {
flex: 1;
padding: 20px;
background-color: #fff;
}
@media screen and (max-width: 500px) {
header, footer, section {
padding: 10px;
}
}
</style>
</head>
<body>
<header>
<h1>HTML5彈性布局示例</h1>
</header>
<section>
<p>這是一段內容。</p>
</section>
<footer>
<p>版權所有 ? 2021</p>
</footer>
</body>
</html>代碼中，我們使用了“display: flex”來啟用彈性布局，而“flex-direction: column”則指定了主軸方向為垂直方向。接下來，我們將header、section和footer元素全部設為彈性項目，并使用“flex: 1”將section元素占滿剩余空間。同時，我們還使用了@media查詢，當屏幕寬度小于500像素時，將元素的padding值修改為10像素。