前言

昨天講了 display 當中的 Flex 屬性
那今天就要來講 display 當中的 Justify-content

Justify-content

--> 主要是以主軸線來排版，一樣需要先宣告 display:flex; 否則會無法使用。

1. flex-start : 對齊主軸線最前端

.banner{
    dispaly:flex;
    justify-content: start;
}

2. center : 對齊主軸線中央

.banner{
    dispaly:flex;
    justify-content: center;
}

3. flex-end : 對齊主軸線最終端

.banner{
    dispaly:flex;
    justify-content: end;
}

4. space-around : 平均分配寬度和間距

.banner{
    dispaly:flex;
    justify-content: around;
}

5. space-between : 平均分配寬，第一項和最後一項貼齊邊緣

.banner{
    dispaly:flex;
    justify-content: between;
}

今天就是一個教大家 display 的另一個簡單排版，明天我們來談談 align
那我們鐵人賽 Day8 見囉!!