|-彈性盒子
|--定義彈性盒子 display：flex
|--定義子元素的排列方式 flex-direction
|--定義子元素的換行方式 flex-wrap
|--定義子元素的對齊方式
|----橫向對齊 justify-content
|----縱向對齊 align-intems

.parent{
    width: 800px;
    height: 400px;
    border: 1px solid red;
    display: flex;/*定義父元素為彈性盒子*/
    flex-direction: row;/*設定子元素的排列方式*/
    flex-wrap: wrap;/*設定子元素的換行方式*/
    justify-content: space-between;/*設定子元素的橫向對齊方式*/
    align-items: auto;/*設定子元素的縱向對齊方式*/
}
.children{
    width: 170px;
    height: 180px;
    border: 1px solid blue;
    flex:1;
    align-self: flex-start;
}
.children1{
    border: 1px solid black;
    flex: 3;
}

|-媒體查詢
|--@media screen and (max-width:最大寬度) and (min-width:最小寬度)

0507彈性盒子、媒體查詢