```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
/*div1設置為彈性盒子
* 1. 彈性盒子中的元素之間沒有空格間隙
* 2. 彈性盒子中的元素默認都是橫排
* 3. 彈性盒子中的元素容易對齊
* justify-content:
* flex-start:居左對齊
* center:居中對齊
* flex-end:居右對齊
* space-between:兩端對齊
* space-around:平分剩余空間
*
* div2設置為彈性盒子
* 4. 元素垂直方向居中容易
* align-items:
* flex-start:居上
* center:居中
* flex-end:居下
* stretch:拉伸（默認）
*
* div3設置為彈性盒子
* 5. 改變item的寬度的時候，高度默認不會等比縮放，所以會有拉伸的效果
* 解決方法：設置彈性盒子的垂直居中為flex-start || center || flex-end
*
* 6. 彈性盒子里的元素默認不換行，如果想讓元素換行，需要設置flex-wrap:wrap。
*/
#div1
{
display: flex;
justify-content: space-between;
}
#div2
{
height: 500px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
#div3
{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.item
{
width:20%;
}
</style>
</head>
<body>
<div id="div1">
<div id="s1">衣戀集團品牌女裝品牌特賣會</div>
<div id="s2">剩3天</div>
</div>
<div id="div2">
<img src="img/15420731471304.jpg" />
<img src="img/15420731720693.jpg" />
</div>
<div id="div3">
<img class="item" src="img/15420731471304.jpg" />
<img class="item" src="img/15420731720693.jpg" />
<img class="item" src="img/15420732017875.jpg" />
<img class="item" src="img/15420732274447.jpg" />
<img class="item" src="img/15420733032269.jpg" />
<img class="item" src="img/15420733296928.jpg" />
<img class="item" src="img/15420733666197.jpg" />
<img class="item" src="img/15420733912841.jpg" />
<img class="item" src="img/15420734196780.jpg" />
<img class="item" src="img/15420734442435.jpg" />
</div>
</body>
</html>
```
