{"id":1312,"date":"2015-04-03T13:43:00","date_gmt":"2015-04-03T05:43:00","guid":{"rendered":"http:\/\/www.gaigaiming.com\/?p=1312"},"modified":"2015-04-03T13:43:00","modified_gmt":"2015-04-03T05:43:00","slug":"flex%e5%bc%b9%e6%80%a7%e7%9b%92%e5%ad%90","status":"publish","type":"post","link":"https:\/\/www.gaigaiming.com\/index.php\/2015\/04\/03\/flex%e5%bc%b9%e6%80%a7%e7%9b%92%e5%ad%90\/","title":{"rendered":"flex\u5f39\u6027\u76d2\u5b50"},"content":{"rendered":"

\u6982\u8ff0<\/h3>\n

UI3.0\u4f7f\u7528\u5f39\u6027\u76d2\u5b50\u5bf9\u9875\u9762\u8fdb\u884c\u5e03\u5c40\uff0cui-box.css\u4e2d\u5c31\u5b9a\u4e49\u4e86\u5f39\u6027\u76d2\u5b50\u7684\u4e00\u4e9bcss3\u6837\u5f0f\uff0c\u5f39\u6027\u76d2\u5b50\u6a21\u578b\u662f\u5728\u6307\u5b9a\u5927\u5c0f\u7684\u7236\u5bb9\u5668\u91cc\u6765\u4e3a\u5b50\u5143\u7d20\u5206\u914d\u7a7a\u95f4\uff0c\u4f7f\u7528box\u67b6\u6784\u53ef\u4ee5\u66f4\u5bb9\u6613\u66f4\u65b9\u4fbf\u7684\u9002\u914d\u4e0d\u540c\u5206\u8fa8\u7387\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u7684\u624b\u673a<\/p>\n

<\/a>CSS Variables<\/h2>\n

<\/a>Box\u67b6\u6784<\/h3>\n

\u5b9a\u4e49\uff1a<\/strong>
\nub\u2026\u2026
\n\u8bf4\u660e\uff1a<\/strong>
\n\u4f7f\u7528box\u5f39\u6027\u76d2\u5b50\u6a21\u5f0f\u5bf9\u9875\u9762\u8fdb\u884c\u5e03\u5c40
\n\u4f8b\u5b50\uff1a<\/strong>
\nub\u5b9a\u4e49\u5143\u7d20\u7684display\u5c5e\u6027\u4e3abox\u3002\u90a3\u4e48\u5b50\u5143\u7d20\u5c31\u53ef\u4ee5\u6839\u636e\u6211\u4eec\u5b9a\u4e49\u7684\u6bd4\u4f8b\u6765\u5206\u914d\u5143\u7d20\u7684\u7a7a\u95f4\uff0cub\u4e00\u822c\u8ddfub-f[1-4]\u642d\u914d\u7740\u4f7f\u7528<\/p>\n

<\/a>Box\u67b6\u6784\u5143\u7d20\u7a7a\u95f4\u5927\u5c0f\u5206\u914d\u6bd4\u4f8b<\/h3>\n

\u5b9a\u4e49\uff1a<\/strong>
\nub-f\u2026\u2026
\n\u8bf4\u660e\uff1a<\/strong>
\n\u5b9a\u4e49\u4e0d\u540c\u7684box-flex\u5c5e\u6027\u503c
\n\u7c7b\u522b\u4f7f\u7528\u6570\u5b57\u7f16\u53f7\uff0c\u5b9a\u4e49\u4e0d\u540c\u7684\u5143\u7d20\u7a7a\u95f4\u5927\u5c0f\u5206\u914d\u6bd4\u4f8b
\n\u4f8b\u5b50\uff1a<\/strong><\/p>\n

ub-f1\u6570\u5b57\u7f16\u53f7\u4e3a1\uff1b\u5b9a\u4e49box-flex\uff1a1
\nub-f1\u6570\u5b57\u7f16\u53f7\u4e3a2\uff1b\u5b9a\u4e49box-flex\uff1a2
\nub-f1\u6570\u5b57\u7f16\u53f7\u4e3a3\uff1b\u5b9a\u4e49box-flex\uff1a3
\nub-f1\u6570\u5b57\u7f16\u53f7\u4e3a4\uff1b\u5b9a\u4e49box-flex\uff1a4
\nub-f[1-4]\u548cub\u642d\u914d\u7740\u4f7f\u7528<\/p><\/blockquote>\n

\u89e3\u6790\uff1a<\/strong>
\n1\u3001\u82e5\u5b50\u5143\u7d20\u90fd\u4f7f\u7528ub-f1\uff0c\u90a3\u4e48\u5b50\u5143\u7d20\u7b49\u6bd4\u4f8b\u7684\u5206\u914d\u7236\u5143\u7d20\u7684\u7a7a\u95f4\u5927\u5c0f<\/p>\n

    \n
  1. <div<\/span> class<\/span>=<\/span>'ub c-gra uba b-bla umh5'<\/span>><\/span><\/code><\/li>\n
  2. <div<\/span> class<\/span>=<\/span>'ub-f1 sc-bg-alert'<\/span>><\/div><\/span><\/code><\/li>\n
  3. <div<\/span> class<\/span>=<\/span>'ub-f1 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
  4. <\/div><\/span><\/code><\/li>\n<\/ol>\n

    \"\"<\/p>\n

    2\u3001\u82e5\u5b50\u5143\u7d20\u4e00\u4e2a\u7528ub-f1\uff0c\u53e6\u5916\u4e00\u4e2a\u7528ub-f2.\uff0c\u90a3\u4e48\u5b50\u5143\u7d20\u6309\u71671\uff1a2\u7684\u6bd4\u4f8b\u5206\u914d\u7236\u5143\u7d20\u7684\u7a7a\u95f4\u5927\u5c0f<\/p>\n

      \n
    1. <div<\/span> class<\/span>=<\/span>'ub c-gra uba b-bla umh5'<\/span>><\/span><\/code><\/li>\n
    2. <div<\/span> class<\/span>=<\/span>'ub-f1 sc-bg-alert'<\/span>><\/div><\/span><\/code><\/li>\n
    3. <div<\/span> class<\/span>=<\/span>'ub-f2 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
    4. <\/div><\/span><\/code><\/li>\n<\/ol>\n

      \"\"
      \n3\u3001\u82e5\u5b50\u5143\u7d20\u5206\u522b\u4f7f\u7528ub-f1\uff0cub-f2\uff0cub-f3\uff0c\u90a3\u4e48\u5b50\u5143\u7d20\u4f1a\u6309\u71671\uff1a2\uff1a3\u7684\u6bd4\u4f8b\u5206\u914d\u7236\u5143\u7d20\u7684\u7a7a\u95f4\u5927\u5c0f<\/p>\n

        \n
      1. <div<\/span> class<\/span>=<\/span>'ub c-gra uba b-bla umh5'<\/span>><\/span><\/code><\/li>\n
      2. <div<\/span> class<\/span>=<\/span>'ub-f1 sc-bg-alert'<\/span>><\/div><\/span><\/code><\/li>\n
      3. <div<\/span> class<\/span>=<\/span>'ub-f2 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
      4. <div<\/span> class<\/span>=<\/span>'ub-f3 sc-bg-active'<\/span>><\/div><\/span><\/code><\/li>\n
      5. <\/div><\/span><\/code><\/li>\n<\/ol>\n

        \"\"
        \n4\u3001\u82e5\u5b50\u5143\u7d20\u4e2d\u53ea\u6709\u4e00\u4e2a\u4f7f\u7528ub-f1\uff0c\u53e6\u5916\u4e00\u4e2a\u5143\u7d20\u6839\u636e\u5185\u5bb9\u7684\u591a\u5c11\u5b9a\u4e49\u5927\u5c0f\uff0c\u90a3\u4e48\u4f7f\u7528ub-f1\u7684\u5143\u7d20\u4f1a\u81ea\u52a8\u9002\u914d\u5143\u7d20\u7684\u5269\u4f59\u7a7a\u95f4\u5927\u5c0f<\/p>\n

          \n
        1. <div<\/span> class<\/span>=<\/span>'ub c-gra uba b-bla umh5'<\/span>><\/span><\/code><\/li>\n
        2. <div<\/span> class<\/span>=<\/span>'sc-bg-alert'<\/span>><\/span>\u5185\u5bb9<\/span><\/div><\/span><\/code><\/li>\n
        3. <div<\/span> class<\/span>=<\/span>'ub-f1 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
        4. <\/div><\/span><\/code><\/li>\n<\/ol>\n

          \"\"<\/p>\n

          ub-f[1-4]\u548cub\u642d\u914d\u7740\u4f7f\u7528
          \n\u573a\u666f\uff1a<\/strong><\/p>\n

            \n
          1. <div<\/span> class<\/span>=<\/span>'uba b-gra c-wh us uc-a '<\/span>><\/span><\/code><\/li>\n
          2. <div<\/span> ontouchstart<\/span>=<\/span>'<\/span>zy_touch<\/span>(<\/span>'<\/span>btn-act<\/span>')'<\/span> class<\/span>=<\/span>'uc-t ubb ub b-gra t-bla ub-ac lis umh4'<\/span>><\/span><\/code><\/li>\n
          3. <div<\/span> class<\/span>=<\/span>'ub-f1 ut-s'<\/span>><\/span>\u8bbe\u7f6e<\/span><\/div><\/span><\/code><\/li>\n
          4. <div<\/span> class<\/span>=<\/span>'tx-r t-blu ulev-1'<\/span>><\/span>Old Phone<\/span><\/div><\/span><\/code><\/li>\n
          5. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/div><\/span><\/code><\/li>\n
          6. <\/div><\/span><\/code><\/li>\n
          7. <div<\/span> ontouchstart<\/span>=<\/span>'<\/span>zy_touch<\/span>(<\/span>'<\/span>btn-act<\/span>')'<\/span> class<\/span>=<\/span>' ub ubb b-gra t-bla ub-ac lis umh4'<\/span>><\/span><\/code><\/li>\n
          8. <div<\/span> class<\/span>=<\/span>'ub-f1 ut-s'<\/span>><\/span>\u8bbe\u7f6e<\/span><\/div><\/span><\/code><\/li>\n
          9. <div<\/span> class<\/span>=<\/span>'tx-r t-blu ulev-1'<\/span>><\/span>Old Phone<\/span><\/div><\/span><\/code><\/li>\n
          10. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/div><\/span><\/code><\/li>\n
          11. <\/div><\/span><\/code><\/li>\n
          12. <div<\/span> ontouchstart<\/span>=<\/span>'<\/span>zy_touch<\/span>(<\/span>'<\/span>btn-act<\/span>')'<\/span> class<\/span>=<\/span>'uc-b ub t-bla ub-ac lis umh4'<\/span>><\/span><\/code><\/li>\n
          13. <div<\/span> class<\/span>=<\/span>'ub-f1 ut-s'<\/span>><\/span>\u8bbe\u7f6e<\/span><\/div><\/span><\/code><\/li>\n
          14. <div<\/span> class<\/span>=<\/span>'tx-r t-blu ulev-1'<\/span>><\/span>Old Phone<\/span><\/div><\/span><\/code><\/li>\n
          15. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/div><\/span><\/code><\/li>\n
          16. <\/div><\/span><\/code><\/li>\n
          17. <\/div><\/span><\/code><\/li>\n<\/ol>\n

            \u56fe\u4f8b\uff1a<\/strong>
            \n\"\"<\/p>\n

            <\/a>Box\u67b6\u6784\u5143\u7d20\u5782\u76f4\u65b9\u5411\u7684\u4f4d\u7f6e\u6392\u5217<\/h3>\n

            \u5b9a\u4e49\uff1a<\/strong>
            \nub-ac\uff0cub-ae\u2026\u2026
            \n\u8bf4\u660e\uff1a<\/strong><\/p>\n

            ub-ac\uff1a\u5782\u76f4\u5c45\u4e2d
            \nub-ae\uff1a\u4f4d\u4e8e\u5e95\u8fb9
            \n\u53ea\u6709\u8ddfub\u642d\u914d\u7740\u4f7f\u7528ub-ac\uff0cub-ae\u7684\u4f5c\u7528\u624d\u751f\u6548<\/p><\/blockquote>\n

            \u4f8b\u5b50\uff1a<\/strong>
            \n1\u3001\u672a\u4f7f\u7528ub-ac\uff0cub-ae<\/p>\n

              \n
            1. <div<\/span> class<\/span>=<\/span>'ub uinn umh4 uba b-gra uc-a'<\/span>><\/span><\/code><\/li>\n
            2. <div<\/span> class<\/span>=<\/span>'ub-f1'<\/span>><\/span>\u5185\u5bb9<\/span><\/div><\/span><\/code><\/li>\n
            3. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/div><\/span><\/code><\/li>\n
            4. <\/div><\/span><\/code><\/li>\n<\/ol>\n

              \"\"
              \n2\u3001\u4f7f\u7528ub-ac<\/p>\n

                \n
              1. <div<\/span> class<\/span>=<\/span>'ub uinn umh4 uba b-gra uc-a ub-ac'<\/span>><\/span><\/code><\/li>\n
              2. <div<\/span> class<\/span>=<\/span>'ub-f1'<\/span>><\/span>\u5185\u5bb9<\/span><\/div><\/span><\/code><\/li>\n
              3. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/div><\/span><\/code><\/li>\n
              4. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                \"\"
                \n3\u3001\u4f7f\u7528ub-ae<\/p>\n

                  \n
                1. <div<\/span> class<\/span>=<\/span>'ub uinn umh4 uba b-gra uc-a ub-ae'<\/span>><\/span><\/code><\/li>\n
                2. <div<\/span> class<\/span>=<\/span>'ub-f1'<\/span>><\/span>\u5185\u5bb9<\/span><\/div><\/span><\/code><\/li>\n
                3. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/div><\/span><\/code><\/li>\n
                4. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                  \"\"
                  \n\u573a\u666f\uff1a<\/strong><\/p>\n

                    \n
                  1. <div<\/span> class<\/span>=<\/span>'uba b-gra c-wh us uc-a '<\/span>><\/span><\/code><\/li>\n
                  2. <div<\/span> ontouchstart<\/span>=<\/span>'<\/span>zy_touch<\/span>(<\/span>'<\/span>btn-act<\/span>')'<\/span> class<\/span>=<\/span>'uc-t ubb ub b-gra t-bla ub-ac lis'<\/span>><\/span><\/code><\/li>\n
                  3. <div<\/span> class<\/span>=<\/span>'lis-icon ub-img im'<\/span>><\/div><\/span><\/code><\/li>\n
                  4. <div<\/span> class<\/span>=<\/span>'ub-f1 ut-s'<\/span>><\/span>\u8bbe\u7f6e<\/span><\/div><\/span><\/code><\/li>\n
                  5. <div<\/span> class<\/span>=<\/span>'tx-r t-blu ulev-1'<\/span>><\/span>Old Phone<\/span><\/div><\/span><\/code><\/li>\n
                  6. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/span>><\/span><\/div><\/span><\/code><\/li>\n
                  7. <\/div><\/span><\/code><\/li>\n
                  8. <div<\/span> ontouchstart<\/span>=<\/span>'<\/span>zy_touch<\/span>(<\/span>'<\/span>btn-act<\/span>')'<\/span> class<\/span>=<\/span>' ub ubb b-grat-bla ub-ac lis'<\/span>><\/span><\/code><\/li>\n
                  9. <div<\/span> class<\/span>=<\/span>'lis-icon ub-img im'<\/span>><\/div><\/span><\/code><\/li>\n
                  10. <div<\/span> class<\/span>=<\/span>'ub-f1 ut-s'<\/span>><\/span>\u8bbe\u7f6e<\/span><\/div><\/span><\/code><\/li>\n
                  11. <div<\/span> class<\/span>=<\/span>'tx-r t-blu ulev-1'<\/span>><\/span>Old Phone<\/span><\/div><\/span><\/code><\/li>\n
                  12. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/div><\/span><\/code><\/li>\n
                  13. <\/div><\/span><\/code><\/li>\n
                  14. <div<\/span> ontouchstart<\/span>=<\/span>'<\/span>zy_touch<\/span>(<\/span>'<\/span>btn-act<\/span>')'<\/span> class<\/span>=<\/span>'uc-b ub t-bla ub-ac lis'<\/span>><\/span><\/code><\/li>\n
                  15. <div<\/span> class<\/span>=<\/span>'lis-icon ub-img im'<\/span>><\/div><\/span><\/code><\/li>\n
                  16. <div<\/span> class<\/span>=<\/span>'ub-f1 ut-s'<\/span>><\/span>\u8bbe\u7f6e<\/span><\/div><\/span><\/code><\/li>\n
                  17. <div<\/span> class<\/span>=<\/span>'tx-r t-blu ulev-1'<\/span>><\/span>Old Phone<\/span><\/div><\/span><\/code><\/li>\n
                  18. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/div><\/span><\/code><\/li>\n
                  19. <\/div><\/span><\/code><\/li>\n
                  20. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                    \u56fe\u4f8b\uff1a<\/strong>
                    \n\"\"<\/p>\n

                    <\/a>Box\u67b6\u6784\u5143\u7d20\u6c34\u5e73\u65b9\u5411\u7684\u4f4d\u7f6e\u6392\u5217<\/h3>\n

                    \u5b9a\u4e49\uff1a<\/strong>
                    \nub-pc\uff0cub-pe\uff0cub-pj\u2026\u2026
                    \n\u8bf4\u660e\uff1a<\/strong><\/p>\n

                    ub-pc\uff1a\u6c34\u5e73\u5c45\u4e2d
                    \nub-pe\uff1a\u4f4d\u4e8e\u672b\u5c3e
                    \nub-pj\uff1a\u4e24\u7aef\u5bf9\u9f50
                    \n\u53ea\u6709\u8ddfub\u642d\u914d\u7740\u4f7f\u7528ub-pc\uff0cub-pe\uff0cub-pj\u7684\u4f5c\u7528\u624d\u751f\u6548<\/p><\/blockquote>\n

                    \u4f8b\u5b50\uff1a<\/strong>
                    \n1\u3001\u672a\u4f7f\u7528ub-pc\uff0cub-pe\uff0cub-pj<\/p>\n

                      \n
                    1. <div<\/span> class<\/span>=<\/span>'uinn2 c-gra ub'<\/span>><\/span> <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-alert'<\/span>><\/div><\/span><\/code><\/li>\n
                    2. <div<\/span> class<\/span>=<\/span>'umh5 umw3 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
                    3. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-active'<\/span>><\/div><\/span><\/code><\/li>\n
                    4. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                      \"\"<\/p>\n

                      2\u3001\u4f7f\u7528ub-pc<\/p>\n

                        \n
                      1. <div<\/span> class<\/span>=<\/span>'uinn2 c-gra ub-pc ub uba b-bla'<\/span>><\/span><\/code><\/li>\n
                      2. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-alert'<\/span>><\/div><\/span><\/code><\/li>\n
                      3. <div<\/span> class<\/span>=<\/span>'umh5 umw3 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
                      4. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-active'<\/span>><\/div><\/span><\/code><\/li>\n
                      5. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                        \"\"
                        \n3\u3001\u4f7f\u7528ub-pe<\/p>\n

                          \n
                        1. <div<\/span> class<\/span>=<\/span>'uinn2 c-gra ub-pe ub uba b-bla'<\/span>><\/span><\/code><\/li>\n
                        2. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-alert'<\/span>><\/div><\/span><\/code><\/li>\n
                        3. <div<\/span> class<\/span>=<\/span>'umh5 umw3 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
                        4. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-active'<\/span>><\/div><\/span><\/code><\/li>\n
                        5. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                          \"\"
                          \n4\u3001\u4f7f\u7528ub-pj<\/p>\n

                            \n
                          1. <div<\/span> class<\/span>=<\/span>'uinn2 c-gra ub-pj ub uba b-bla'<\/span>><\/span><\/code><\/li>\n
                          2. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-alert'<\/span>><\/div><\/span><\/code><\/li>\n
                          3. <div<\/span> class<\/span>=<\/span>'umh5 umw3 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
                          4. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-active'<\/span>><\/div><\/span><\/code><\/li>\n
                          5. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                            \"\"<\/p>\n

                            <\/a>Box\u67b6\u6784\u5143\u7d20\u5782\u76f4\u6392\u5217<\/h3>\n

                            \u5b9a\u4e49\uff1a<\/strong>
                            \nub-ver\u2026.
                            \n\u8bf4\u660e\uff1a<\/strong>
                            \nub-ver\uff1a\u5b9a\u4e49\u5143\u7d20\u5782\u76f4\u6392\u5217
                            \n\u53ea\u6709\u8ddfub\u642d\u914d\u7740\u4f7f\u7528ub-ver\u7684\u4f5c\u7528\u624d\u751f\u6548
                            \n\u4f8b\u5b50\uff1a<\/strong>
                            \n1\u3001\u672a\u4f7f\u7528ub-ver<\/p>\n

                              \n
                            1. <div<\/span> class<\/span>=<\/span>'uinn2 c-gra ub uba b-bla'<\/span>><\/span><\/code><\/li>\n
                            2. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-alert'<\/span>><\/div><\/span><\/code><\/li>\n
                            3. <div<\/span> class<\/span>=<\/span>'umh5 umw3 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
                            4. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-active'<\/span>><\/div><\/span><\/code><\/li>\n
                            5. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                              \"\"
                              \n2\u3001\u4f7f\u7528ub-ver<\/p>\n

                                \n
                              1. <div<\/span> class<\/span>=<\/span>'uinn2 c-gra ub ub-ver uba b-bla'<\/span>><\/span><\/code><\/li>\n
                              2. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-alert'<\/span>><\/div><\/span><\/code><\/li>\n
                              3. <div<\/span> class<\/span>=<\/span>'umh5 umw3 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
                              4. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-active'<\/span>><\/div><\/span><\/code><\/li>\n
                              5. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                                \"\"<\/p>\n

                                <\/a>Box\u67b6\u6784\u5143\u7d20\u6392\u5217\u65b9\u5411<\/h3>\n

                                \u5b9a\u4e49\uff1a<\/strong>
                                \nub-rev\u2026\u2026
                                \n\u8bf4\u660e\uff1a<\/strong>
                                \nub-rev\uff1a\u5b9a\u4e49\u5143\u7d20\u6392\u5217\u65b9\u5411
                                \n\u53ea\u6709\u8ddfub\u642d\u914d\u7740\u4f7f\u7528ub-rev\u7684\u4f5c\u7528\u624d\u751f\u6548
                                \n\u4f8b\u5b50\uff1a<\/strong>
                                \n1\u3001\u672a\u4f7f\u7528ub-rev<\/p>\n

                                  \n
                                1. <div<\/span> class<\/span>=<\/span>'uinn2 c-gra ub uba b-bla'<\/span>><\/span><\/code><\/li>\n
                                2. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-alert'<\/span>><\/div><\/span><\/code><\/li>\n
                                3. <div<\/span> class<\/span>=<\/span>'umh5 umw3 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
                                4. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-active'<\/span>><\/div><\/span><\/code><\/li>\n
                                5. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                                  \"\"<\/p>\n

                                  2\u3001\u4f7f\u7528ub-rev<\/p>\n

                                    \n
                                  1. <div<\/span> class<\/span>=<\/span>'uinn2 c-gra ub ub-rev uba b-bla'<\/span>><\/span><\/code><\/li>\n
                                  2. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-alert'<\/span>><\/div><\/span><\/code><\/li>\n
                                  3. <div<\/span> class<\/span>=<\/span>'umh5 umw3 bc-head'<\/span>><\/div><\/span><\/code><\/li>\n
                                  4. <div<\/span> class<\/span>=<\/span>'umh5 umw3 sc-bg-active'<\/span>><\/div><\/span><\/code><\/li>\n
                                  5. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                                    \"\"<\/p>\n

                                    <\/a>Box\u67b6\u6784\u5b9e\u73b0\u6a2a\u5411\u6ed1\u52a8\u6548\u679c<\/h3>\n

                                    \u5b9a\u4e49\uff1a<\/strong>
                                    \nub-fh\u2026\u2026
                                    \n\u8bf4\u660e\uff1a<\/strong>
                                    \n\u5728box\u67b6\u6784\u4e2dub-fh\u4e00\u822c\u8ddf\u51fd\u6570zyFlip\uff08\uff09\u642d\u914d\u7740\u4f7f\u7528\u5b9e\u73b0\u6a2a\u5411\u6ed1\u52a8\u6548\u679c<\/p>\n

                                    <\/a>Box\u67b6\u6784\u5b9e\u73b0\u7eb5\u5411\u6ed1\u52a8\u6548\u679c<\/h3>\n

                                    \u5b9a\u4e49\uff1a<\/strong>
                                    \nub-fv\u2026\u2026
                                    \n\u8bf4\u660e\uff1a<\/strong>
                                    \n\u5728box\u67b6\u6784\u4e2dub-fv\u4e00\u822c\u8ddf\u51fd\u6570iScroll\uff08\uff09\u642d\u914d\u7740\u4f7f\u7528\u5b9e\u73b0\u7eb5\u5411\u6ed1\u52a8\u6548\u679c<\/p>\n

                                    <\/a>\u80cc\u666f\u56fe\u7247\u7c7b\u522b<\/h3>\n

                                    \u5b9a\u4e49\uff1a<\/strong>
                                    \nub-img[\u7c7b\u522b]\u2026\u2026
                                    \n\u8bf4\u660e\uff1a<\/strong>
                                    \n\u524d\u7f00\u4e3aub-img
                                    \n\u7c7b\u522b\u4e3a\u6570\u5b57\u7f16\u53f7\uff0c\u7528\u4e8e\u5b9a\u4e49\u4e0d\u540c\u7684\u80cc\u666f\u6392\u5217\u65b9\u5f0f
                                    \n\u4f8b\u5b50\uff1a<\/strong><\/p>\n

                                    ub-img\u7c7b\u522b\u4e3a\u7a7a\uff0c\u5b9a\u4e49\u5c06\u80cc\u666f\u56fe\u50cf\u7b49\u6bd4\u7f29\u653e\u5230\u5bbd\u5ea6\u6216\u9ad8\u5ea6\u4e0e\u5bb9\u5668\u7684\u5bbd\u5ea6\u6216\u9ad8\u5ea6\u76f8\u7b49\uff0c\u80cc\u666f\u56fe\u50cf\u59cb\u7ec8\u5305\u542b\u5728\u5bb9\u5668\u5185
                                    \nub-img1\u7c7b\u522b\u4e3a1\uff0c\u5b9a\u4e49\u5c06\u80cc\u666f\u56fe\u7247\u7b49\u6bd4\u4f8b\u7f29\u653e\u5230\u5b8c\u5168\u8986\u76d6\u5bb9\u5668\uff0c\u80cc\u666f\u56fe\u50cf\u6709\u53ef\u80fd\u8d85\u8fc7\u5bb9\u5668
                                    \nub-img2\u7c7b\u522b\u4e3a2\uff0c\u5b9a\u4e49\u80cc\u666f\u56fe\u50cf\u6a2a\u5411\u5e73\u94fa
                                    \nub-img3\u7c7b\u522b\u4e3a3\uff0c\u5b9a\u4e49\u80cc\u666f\u56fe\u50cf\u7eb5\u5411\u5e73\u94fa
                                    \nub-img4\u7c7b\u522b\u4e3a4\uff0c\u5b9a\u4e49\u80cc\u666f\u56fe\u50cf\u6a2a\u5411100%\uff0c\u7eb5\u5411\u81ea\u9002\u5e94;
                                    \nub-img5\u7c7b\u522b\u4e3a5\uff0c\u5b9a\u4e49\u80cc\u666f\u56fe\u50cf\u6a2a\u5411\u81ea\u9002\u5e94\uff0c\u7eb5\u5411\u4e3a100%
                                    \nub-img6\u7c7b\u522b\u4e3a6\uff0c\u5b9a\u4e49\u80cc\u666f\u56fe\u50cf\u5c45\u4e2d\u663e\u793a<\/p><\/blockquote>\n

                                    \u573a\u666f\uff1a<\/strong><\/p>\n

                                      \n
                                    1. <div<\/span> class<\/span>=<\/span>'uba b-gra c-wh us uc-a '<\/span>><\/span><\/code><\/li>\n
                                    2. <div<\/span> ontouchstart<\/span>=<\/span>'<\/span>zy_touch<\/span>(<\/span>'<\/span>btn-act<\/span>')'<\/span> class<\/span>=<\/span>'uc-t ubb ub b-gra t-bla ub-ac lis'<\/span>><\/span><\/code><\/li>\n
                                    3. <div<\/span> class<\/span>=<\/span>'lis-icon ub-img im'<\/span>><\/div><\/span><\/code><\/li>\n
                                    4. <div<\/span> class<\/span>=<\/span>'ub-f1 ut-s'<\/span>><\/span>\u8bbe\u7f6e<\/span><\/div><\/span><\/code><\/li>\n
                                    5. <div<\/span> class<\/span>=<\/span>'tx-r t-blu ulev-1'<\/span>><\/span>Old Phone<\/span><\/div><\/span><\/code><\/li>\n
                                    6. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/div><\/span><\/code><\/li>\n
                                    7. <\/div><\/span><\/code><\/li>\n
                                    8. <div<\/span> ontouchstart<\/span>=<\/span>'<\/span>zy_touch<\/span>(<\/span>'<\/span>btn-act<\/span>')'<\/span> class<\/span>=<\/span>' ub ubb b-gra t-bla ub-ac lis'<\/span>><\/span><\/code><\/li>\n
                                    9. <div<\/span> class<\/span>=<\/span>'lis-icon ub-img im'<\/span>><\/div><\/span><\/code><\/li>\n
                                    10. <div<\/span> class<\/span>=<\/span>'ub-f1 ut-s'<\/span>><\/span>\u8bbe\u7f6e<\/span><\/div><\/span><\/code><\/li>\n
                                    11. <div<\/span> class<\/span>=<\/span>'tx-r t-blu ulev-1'<\/span>><\/span>Old Phone<\/span><\/div><\/span><\/code><\/li>\n
                                    12. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/div><\/span><\/code><\/li>\n
                                    13. <\/div><\/span><\/code><\/li>\n
                                    14. <div<\/span> ontouchstart<\/span>=<\/span>'<\/span>zy_touch<\/span>(<\/span>'<\/span>btn-act<\/span>')'<\/span> class<\/span>=<\/span>'uc-b ub t-bla ub-ac lis'<\/span>><\/span><\/code><\/li>\n
                                    15. <div<\/span> class<\/span>=<\/span>'lis-icon ub-img im'<\/span>><\/div><\/span><\/code><\/li>\n
                                    16. <div<\/span> class<\/span>=<\/span>'ub-f1 ut-s'<\/span>><\/span>\u8bbe\u7f6e<\/span><\/div><\/span><\/code><\/li>\n
                                    17. <div<\/span> class<\/span>=<\/span>'tx-r t-blu ulev-1'<\/span>><\/span>Old Phone<\/span><\/div><\/span><\/code><\/li>\n
                                    18. <div<\/span> class<\/span>=<\/span>'res8 lis-sw ub-img'<\/span>><\/div><\/span><\/code><\/li>\n
                                    19. <\/div><\/span><\/code><\/li>\n
                                    20. <\/div><\/span><\/code><\/li>\n<\/ol>\n

                                      \u56fe\u4f8b\uff1a<\/strong>
                                      \n\"\"<\/p>\n

                                      \u6839\u672c\u7684\u5c31\u662f<\/p>\n

                                      <div style=\"width:300px; display:-webkit-box; display:box;\">\n<div style=\"-webkit-box-flex:1.0; border:1px solid #f00;\">12<\/div>\n<div style=\"-webkit-box-flex:2.0; border:1px solid #000;\">12<\/div>\n<\/div>\n\n<div style=\"width:600px; display:-webkit-box;display:box;\">\n<div style=\"-webkit-box-flex:1; border:1px solid #f00\"><\/div>\n<div style=\"-webkit-box-flex:2; background:#ff0\"><\/div>\n<\/div><\/pre>\n
                                       <\/p>\n
                                       <\/p>\n","protected":false},"excerpt":{"rendered":"
                                      \u6982\u8ff0 UI3.0\u4f7f\u7528\u5f39\u6027\u76d2\u5b50\u5bf9\u9875\u9762\u8fdb\u884c\u5e03\u5c40\uff0cui-box.css\u4e2d\u5c31\u5b9a\u4e49\u4e86\u5f39\u6027\u76d2\u5b50\u7684\u4e00\u4e9bcss3\u6837\u5f0f\uff0c\u5f39\u6027\u76d2\u5b50 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-1312","post","type-post","status-publish","format-standard","hentry","category-4"],"_links":{"self":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/posts\/1312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/comments?post=1312"}],"version-history":[{"count":0,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/posts\/1312\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/media?parent=1312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/categories?post=1312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/tags?post=1312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}