css – flexbox 速記

2018-04-09 / JSN / 0 Comments / 76 次瀏覽

參考網友整理教學

.container  
        
        // 排咧左至右或右至左，影響 flex-direction  
        writing-mode: ltr | rtl; 

        // flex-direction 和 flex-wrap 的縮寫
        flex-flow: <flex-direction> | <flex-wrap>;

                // main axis 的方向
                flex-direction: row | row-reverse | column | column-reverse; 

                // 產生換行效果
                flex-wrap: nowrap | wrap | wrap-reverse;


        // 主要是用在當 main-axis 有換行時。此屬性相當於 justify-content 與 align-items 的綜合版
        align-content: flex-start | flex-end | center | space-between | space-around | stretch;
                
                // flex item 在 main axis 上的排列位置
                justify-content: flex-start | flex-end | center | space-between | space-around;

                // cross axis 的方向
                align-items: flex-start | flex-end | center | baseline | stretch;
        

.item

        // 元素位置
        order: <integer>; 

        // 縮寫，預設值為 0 0 auto
        flex: <flex-grow> <flex-shrink> <flex-basis>; 

                // 自動佔滿剩餘寬度
                flex-grow: <number>; 

                // 為 flex-grow 的相反
                flex-shrink: <number>; 
                
                // 最小的寬度或高度
                flex-basis: <length> | auto; 
                
        //  可以將個別 item 的 align-items 屬性覆蓋過去
        align-self: auto | flex-start | flex-end | center | baseline | stretch;