• 移動端flex布局

    移動端flex布局

    彈性盒布局語法分為兩部分:

    1. 添加在父容器上的語法

    (1)display : flex; 設置為彈性盒(父元素添加)

     

    (2)flex-direction: 主軸排列方式

      row; 默認值,默認為橫向排列。

      row-reverse; 反轉橫向排列(右對齊,從后往前排,最后一項排在最前面。                  

      column; 顯示為列。

      column-reverse; 反轉縱向排列,從下往上排,最后一項在最上面。

    (3)flex-wrap: 是否進行換行處理。

      nowrap; 默認值,不換行處理

      wrap; 換行處理  (第二行處于中間位置)

      wrap-reverse; 反向換行

      

    (4)justify-content: 決定了主軸方向上子項的對齊和分布方式。(主軸對齊方式)

      flex-start; 默認,頂端對齊。    

      center; 居中對齊。

      flex-end; 末端對齊。

      space-between; 表現為兩端對齊。between是中間的意思,意思是多余的空白間距只在元素中間區域分配。

      space-around; 均分對齊,around是環繞的意思,意思是每個flex子項兩側都環繞互不干擾的等寬的空白間距,最終視覺上邊緣兩側的空白只有中間空白寬度一半。

      space-evenly; evenly是勻稱、平等的意思。也就是視覺上,每個flex子項兩側空白間距完全相等。

     

    (5)align-items : 每一行中的子元素上下對齊方式.(側軸對齊方式)

      flex-start;(y軸頂部對齊)

      center;(y軸中間對齊)

      flex-end;(y軸以底部對齊)   

      baseline;如果彈性盒元素的行內軸與側軸為同一條,則該值與flex-start等效。其他情況下,該值將參與基線對齊。

    (6)align-content : 行與行之間的對齊方式。                         

      flex-start;(以開始位置為對齊方式)

      center;(居中對齊)

      flex-end;(底對齊)   

      space-between;(兩端對齊)

      space-around;(均分對齊)

      注:要兩行即兩行以上 。

    2.添加到子容器上的語法    

    (1)flex-grow : 一個數字,規定項目將相對于其他靈活的項目進行擴展的量。                

      0; 默認值 , 不去擴展

      1; 去擴展 , 會把空白區域全部占滿

     

    (2)flex-shrink : 一個數字,規定項目將相對于其他靈活的項目進行收縮的量。                

      正常默認值是1

      0表示不收縮。           

      注:當沒有空余并且值大于1的時候才收縮,并且沒有負值。

     

    (3)flex-basis : 跟flex-shrink/flex-grow很像。

    flex-shrink/flex-grow是設置一個比例值,flex-basis是設置一個具體值。

     

    (4)flex:1; 每個子項都加flex:1;則剩余空間平分。

     

    (5)algin-self: 規定靈活容器內被選中項目的對齊方式。    

      auto;默認值。元素繼承了父容器的align-items屬性。如果沒有父容器則為“stretch”                

      flex-start;元素位于容器的開頭。

      center;元素位于容器的中心。

      flex-end;元素位于容器的結尾。

      stretch;元素被拉伸以適應容器。

     

    (6)order:number順序優先級,數字越大越往后排,默認為0,支持負數。

           

     

    posted @ 2020-03-01 15:48  穩住別慌  閱讀(...)  評論(...編輯  收藏
    贵州快三平台贵州快三主页贵州快三网站贵州快三官网贵州快三娱乐贵州快三开户贵州快三注册贵州快三是真的吗贵州快三登入贵州快三快三贵州快三时时彩贵州快三手机app下载贵州快三开奖 龙海市 | 阿合奇县 | 济宁市 | 资源县 | 监利县 | 安福县 | 新乐市 | 四会市 | 梨树县 | 武胜县 | 赤峰市 | 慈利县 | 呼图壁县 | 松阳县 | 尼木县 | 霍州市 | 吉安县 | 夏津县 | 沂水县 | 西峡县 | 宜昌市 | 柘城县 | 兰考县 | 南陵县 | 包头市 | 南郑县 | 普宁市 | 闵行区 | 吉木乃县 | 阳山县 | 青浦区 | 玉门市 | 长葛市 | 尼勒克县 | 新田县 | 宝坻区 | 许昌县 | 镇安县 | 开原市 | 宜城市 | 陕西省 | 涞水县 | 顺昌县 | 汝南县 | 兴业县 | 靖西县 | 施秉县 | 凤冈县 | 南川市 | 揭阳市 | 沂南县 | 乐陵市 | 聊城市 | 交口县 | 邯郸县 | 中山市 | 龙游县 | 永登县 | 定日县 | 兖州市 | 无极县 | 台前县 | 惠水县 | 乌拉特中旗 | 仁布县 | 深泽县 | 昌邑市 | 华阴市 | 井陉县 | 调兵山市 | 铅山县 | 惠来县 | 合川市 | 盐亭县 | 绵阳市 | 荔波县 | 南郑县 | 扶风县 | 德令哈市 | 山阳县 | 开阳县 | 广丰县 | 肇源县 | 凤山市 | 石渠县 | 无为县 | 山阴县 | 叙永县 | 康保县 | 靖安县 | 旺苍县 | 中卫市 | 讷河市 | 潍坊市 | 翁源县 | 安宁市 | 乌什县 | 北京市 | 石家庄市 | 抚顺县 | 依安县 | 清河县 | 天水市 | 当雄县 | 邵东县 | 当涂县 | 德惠市 | 镇康县 | 全州县 | 通化县 | 金昌市 | 县级市 | 乳山市 | 旬阳县 | 盐城市 | 简阳市 | 大名县 | 宁都县 | 垫江县 | 德令哈市 | 金湖县 | 菏泽市 | 贵阳市 | 西安市 | 板桥市 | 临西县 | 科技 | 屯门区 | 金塔县 | 易门县 | 巴东县 | 东莞市 | 分宜县 | 红桥区 | 元谋县 | 郯城县 | 石林 | 正阳县 | 枣强县 | 桃源县 | 白沙 | 淳安县 | 彭山县 | 天气 | 昆山市 | 应城市 | 剑川县 | 石河子市 | 长岭县 | 林州市 | 衡东县 | 达州市 | 独山县 | 洪雅县 | 乐业县 | 江陵县 | 上杭县 | 台州市 | 垣曲县 | 班玛县 | 仁化县 | 鄂托克前旗 | 托克逊县 | 宝兴县 | 林口县 | 息烽县 | 勃利县 | 乐昌市 | 乌鲁木齐市 | 辰溪县 | 永胜县 | 二连浩特市 | 砚山县 | 阿瓦提县 | 奉化市 | 周口市 | 天全县 | 略阳县 | 乐都县 | 延川县 | 万源市 | 阳东县 | 奉新县 | 抚顺县 | 合水县 | 汝城县 | 富裕县 | 博乐市 | 衡阳市 | 香河县 | 荣昌县 | 武川县 | 乐昌市 | 南投县 | 宁化县 | 炉霍县 | 阜新 | 东丰县 | 南乐县 | 江津市 | 安塞县 | 台北县 | 宁夏 | 荔波县 | 文昌市 | 即墨市 | 敖汉旗 |