# 2023-2-21 CSS
###### tags: `HTML` `CSS`

.parent{
    /*flex的第一子層物件都可以設定寬高，不管是不是inline*/
    display:flex;
    flex-direction:...;
    
    /* flex-wrap控制交叉軸方向 */
    flex-wrap:...;
    
    /* justify-content控制軸向 */
    /* 不要太依賴justify-content */
    justify-content:...;
    
    /* 控制彈性列or欄 在父層空間 交叉軸的位置與空間 */
    /* 預設是stretch */
    /* 沒有flex-wrap的話，彈性列就是整個父層空間 */
    align-content: stretch;
    
    /* 控制子物件 在彈性列裡面 交叉軸的位置 */
    align-items:...;
}
.child{
    /* 控制單一子物件 在彈性列裡面 交叉軸的位置 */
    align-self:...;
    
    /* auto可以分配剩餘的邊界空間，但上下方向不行，除非父物件有設定flex */
    margin: auto;
    margin-left: auto;
    
    /* order預設值為0 */
    order:...;
    
    /* 控制子物件 在彈性列中 剩餘空間的伸展值 */
    flex-grow:...;
    
    /*   ... 剩餘空間的縮減
     *  預設為1，0為不縮減  */
    flex-shrink:...;
    
    /* 物件在主軸上的長度 */
    flex-basis:...;
    
    /* flex-grow flex-shrink flex-basis 三者濃縮 */
    flex: <flex-grow> <flex-shrink> <flex-basis>;
}

example:

example:

.child:nth-child(3){
    margin-left:auto;
}

---

example:

/* 動態父物件，子物件自動伸展 */
.child{
    width: 0px;
    flex-grow: 1;
}
.child:nth-child(2){
    flex-grow: 3;
}

---

example:

.child{
    width: 0px;
    flex-shrink: 0;
}
.child:nth-child(2){
    flex-shrink: 1;
}

---

**學習建議**：
1. 學跟熟是兩回事
2. 嘗試紙上切版
3. 不建議在flex的下方直接放img，而不用div包裹，==容器跟資料要分清楚==