網頁是由許多區塊組成的區塊模型，擁有div標籤的區塊，在預設情況，會垂直的一層一層往下排，當我們需要區塊並排(水平排列)時，就需要在css中加入diplay:flex，假設並排兩個區塊，有幾種調整寬度的方法:

• flex:none 固定寬度配置
• width:50% 按照比例縮放
• width:100px 固定為幾個像素
• flex:auto自動把剩下空間填滿

我們也可以用先寫上display:flex，再加上justify-content設置區塊水平的置中，靠左或靠右，或是用align-items設置 垂直的靠中，靠下。
justify-content:flex-end;水平對齊
text-align:center;

像是如果需要區塊在正中央，也就是同時垂直水平置中的話

display:flex
justify-content:center;align-items:center

在html裡分層是最重要的，攸關了整個網頁的結構，css則是幫助我們設定每個區塊顯示方式像位置大小顏色等等，例如在中央顯示歡迎光臨。

<div class="welcome">
        <div class="text">歡迎光臨</div>
</div>

welcome{
    display:flex;
    justify-content:center;
    align-items:center;
    height:300px;
    background-color:#cccccc;
}
.text{
    width:300px;height:40px;
    font-size:30px;
    font-weight:bold;
    text-align: center;
}