flex佈局

 

父容器

/* 定義flex容器 */
    display: flex;
    /* 
        設置容器內部元素的排列方向 
        row: 定義排列方向 從左到右
        row-reverse: 從右到左
        column: 從上到下
        column-reverse: 從下到上
    */
    flex-direction: column;
    
    /**
        nowrap: 不換行
        wrap: 換行
        wrap-reverse: 逆向換行
     */
    flex-wrap: wrap;
    
    /* 
        當軸線超過1條的時候，flex容器能夠把多條軸線視爲元素對待，能夠進行對齊
        center：居中
        flex-start: 向左對齊
        flex-end: 向右對齊
        stretch: 當寬度width沒有設置的時候，軸線能夠被拉伸
        space-between: 兩端對齊，元素之間的空白等比切分
        space-around: 軸線兩邊的空白等比切分
     */
    align-content: space-around;

子容器

　　  /* 
        重寫容器中元素在交叉軸上的對齊方式
        auto: 默認，表示繼承父級元素的align-items屬性
        stretch：當元素的高度沒有設置，則元素的高度會拉伸至容器高度一致
        flex-start: 在交叉軸上向起點位置（向上/向左）對齊
        flex-end: 在交叉軸上向結束位置（向下/向右）對齊
        center: 居中對齊
        baseline: 保證元素中的文字在同一條基準線（保證每一個文字都在同一條線上）
     */
    align-self: stretch;

 

/* 
    order: 用於設置flex容器內部的每一個元素的排列順序，默認是0
           排序規則，由小到大
    flex-grow: 用於設置元素的放大比例，默認爲0
               若是爲0，則不放大
    flex-shrink: 用於定義屬性的縮放比例，默認爲1
                 設置爲0的時候，不進行縮放
 */

.red {
    background-color: #FF0000;
    /* order: 0; */
    /* flex-grow: 2; */
    flex-shrink: 0;
    flex-basis: 150upx;
}