HTML5提供了許多新的布局方式，其中彈性盒子就是一種非常常用的布局方式。彈性盒子可以幫助我們快速構建出靈活的布局效果，實現頁面自適應的效果。那么如何使用HTML5來設置彈性盒子呢？

<div class="box">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>

首先，我們需要在HTML文檔中創建一個包含所有需要布局的元素的容器，這里我使用一個div元素。然后，我們為每一個需要布局的元素添加一個class，這樣我們就可以在CSS樣式表中對其進行定位。在這個例子中，我添加了三個class分別為item、item-1、item-2和item-3的div元素。

.box {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
}
.item-1 {
flex: 1;
}
.item-2 {
flex: 2;
}
.item-3 {
flex: 1;
}

在CSS樣式表中，我們將.box元素設置為display: flex，這樣就可以將它內部的所有元素都變成了彈性元素。接著，我們使用justify-content屬性為其中的彈性元素設置主軸的布局方式，這里我使用的是space-between，表示彈性元素之間的間距相等并且與容器的兩側距離相等。align-items屬性則是用來設置彈性元素在交叉軸方向的對齊方式。這里我使用的是center，表示彈性元素在交叉軸上居中對齊。

之后，我們針對每一個彈性元素單獨設置一些樣式。這里我設置了三個彈性元素，分別為item-1、item-2和item-3。我們可以使用flex屬性來設置彈性元素的伸縮比例，這樣就能夠控制它們在主軸方向上的占比。在這個例子中，我將item-1和item-3的伸縮比例設置為了1，將item-2的伸縮比例設置為了2。這樣，item-2元素在主軸方向上就會占據其他兩個元素的兩倍寬度。

這樣，我們就可以使用HTML5來設置彈性盒子了。如果你熟悉CSS3的話，可以嘗試使用更多的CSS屬性來調整布局的效果，比如flex-wrap、flex-direction等等。