• 移動端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下载贵州快三开奖 凤冈县 | 隆德县 | 蛟河市 | 侯马市 | 龙川县 | 托克逊县 | 大庆市 | 九龙坡区 | 清水县 | 馆陶县 | 吉林省 | 溧水县 | 盖州市 | 商都县 | 永年县 | 莎车县 | 井研县 | 长垣县 | 建平县 | 汉中市 | 古丈县 | 松原市 | 左贡县 | 青州市 | 安多县 | 辽宁省 | 义马市 | 乌鲁木齐市 | 六盘水市 | 长治市 | 婺源县 | 贵州省 | 丹凤县 | 丰原市 | 顺平县 | 石楼县 | 乌拉特前旗 | 柳河县 | 汾阳市 | 桃园市 | 奉节县 | 垫江县 | 桐柏县 | 长岭县 | 依安县 | 裕民县 | 泸溪县 | 苏尼特左旗 | 苗栗县 | 平和县 | 和静县 | 苍南县 | 施秉县 | 侯马市 | 偃师市 | 西安市 | 平山县 | 江都市 | 封丘县 | 宜章县 | 定日县 | 哈密市 | 碌曲县 | 巴楚县 | 台东市 | 个旧市 | 平远县 | 余干县 | 石楼县 | 武山县 | 临沧市 | 弋阳县 | 固安县 | 凤冈县 | 尤溪县 | 西吉县 | 长岛县 | 天峻县 | 江源县 | 武宣县 | 历史 | 奉新县 | 丁青县 | 桃园县 | 馆陶县 | 天长市 | 郸城县 | 临武县 | 金阳县 | 万山特区 | 会宁县 | 黔西 | 宝鸡市 | 平昌县 | 上林县 | 全南县 | 北辰区 | 广安市 | 龙游县 | 聂拉木县 | 新宁县 | 大宁县 | 遂溪县 | 藁城市 | 蒙阴县 | 盐津县 | 托克托县 | 湘潭县 | 海晏县 | 望都县 | 周宁县 | 石首市 | 盈江县 | 苗栗市 | 安新县 | 巴林左旗 | 满洲里市 | 东宁县 | 新绛县 | 朝阳区 | 延川县 | 陆河县 | 浮梁县 | 调兵山市 | 门头沟区 | 昂仁县 | 龙口市 | 河西区 | 武城县 | 搜索 | 邵阳市 | 太保市 | 上杭县 | 田东县 | 中西区 | 安平县 | 南通市 | 连州市 | 台江县 | 思茅市 | 定结县 | 芷江 | 平安县 | 灵武市 | 柯坪县 | 凤山市 | 班戈县 | 乐业县 | 聊城市 | 深州市 | 叙永县 | 柘荣县 | 循化 | 清丰县 | 廊坊市 | 电白县 | 宁蒗 | 霞浦县 | 昭通市 | 房产 | 象山县 | 武隆县 | 和田市 | 北辰区 | 兴化市 | 渑池县 | 团风县 | 重庆市 | 留坝县 | 都江堰市 | 林周县 | 马龙县 | 河池市 | 寿光市 | 慈溪市 | 左权县 | 山阳县 | 荥阳市 | 乐亭县 | 洱源县 | 明光市 | 当雄县 | 白城市 | 大厂 | 南通市 | 广元市 | 襄垣县 | 云霄县 | 大新县 | 丽江市 | 于田县 | 财经 | 山阴县 | 临江市 | 如东县 | 舟山市 | 兴化市 | 嘉荫县 | 右玉县 | 南投市 | 望谟县 | 东明县 | 中牟县 | 清原 | 博客 | 镇平县 | 高清 |