{"id":2349,"date":"2017-05-21T10:26:43","date_gmt":"2017-05-21T02:26:43","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2349"},"modified":"2017-05-21T10:26:43","modified_gmt":"2017-05-21T02:26:43","slug":"flex%e5%ae%9e%e7%8e%b0%e7%ad%9b%e5%ad%90%e5%b8%83%e5%b1%80","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2349","title":{"rendered":"flex\u5b9e\u73b0\u7b5b\u5b50\u5e03\u5c40"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n    <title>Document<\/title>\r\n    <style>\r\n        body {\r\n            background: burlywood;\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .main {\r\n            width: 200px;\r\n            height: 200px;\r\n            background: white;\r\n            padding: 5px;\r\n            display: flex;\r\n            object-fit: contain;\r\n            margin: 16px;\r\n            box-shadow: inset 0 5px white,\r\n            inset 0 -5px #bbb,\r\n            inset 5px 0 #d7d7d7,\r\n            inset -5px 0 #d7d7d7;\r\n\r\n            border-radius: 10%;\r\n            padding: 14px;\r\n        }\r\n\r\n        .main .item {\r\n            width: 45px;\r\n            height: 45px;\r\n            background: black;\r\n            border-radius: 50%;\r\n            box-shadow: inset 0 3px #111, inset 0 -3px #555;\r\n        }\r\n\r\n        .first {\r\n            justify-content: center;\r\n            align-items: center;\r\n        }\r\n\r\n        .second {\r\n            justify-content: space-between;\r\n        }\r\n\r\n        .second .item:nth-child(2) {\r\n            align-self: flex-end;\r\n        }\r\n\r\n        .third {\r\n            justify-content: space-between;\r\n        }\r\n\r\n        .third .item:nth-child(2) {\r\n            align-self: center;\r\n        }\r\n\r\n        .third .item:nth-child(3) {\r\n            align-self: flex-end;\r\n        }\r\n\r\n        .four {\r\n            justify-content: space-between;\r\n        }\r\n\r\n        .four .column {\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n        }\r\n\r\n        .fif {\r\n            justify-content: space-between;\r\n        }\r\n\r\n        .fif .column {\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n        }\r\n\r\n        .fif .column:nth-child(2) {\r\n            justify-content: center;\r\n            align-self: center;\r\n        }\r\n\r\n        .six {\r\n            justify-content: space-between;\r\n        }\r\n\r\n        .six .column {\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n\r\n<body>\r\n    <div class=\"first main\">\r\n        <div class=\"item\"><\/div>\r\n    <\/div>\r\n    <div class=\"second main\">\r\n        <div class=\"item\"><\/div>\r\n        <div class=\"item\"><\/div>\r\n    <\/div>\r\n    <div class=\"third main\">\r\n        <div class=\"item\"><\/div>\r\n        <div class=\"item\"><\/div>\r\n        <div class=\"item\"><\/div>\r\n    <\/div>\r\n    <div class=\"four main\">\r\n        <div class=\"column\">\r\n            <div class=\"item\"><\/div>\r\n            <div class=\"item\"><\/div>\r\n        <\/div>\r\n        <div class=\"column\">\r\n            <div class=\"item\"><\/div>\r\n            <div class=\"item\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"fif main\">\r\n        <div class=\"column\">\r\n            <div class=\"item\"><\/div>\r\n            <div class=\"item\"><\/div>\r\n        <\/div>\r\n        <div class=\"column\">\r\n            <div class=\"item\"><\/div>\r\n        <\/div>\r\n        <div class=\"column\">\r\n            <div class=\"item\"><\/div>\r\n            <div class=\"item\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"six main\">\r\n        <div class=\"column\">\r\n            <div class=\"item\"><\/div>\r\n            <div class=\"item\"><\/div>\r\n            <div class=\"item\"><\/div>\r\n        <\/div>\r\n        <div class=\"column\">\r\n            <div class=\"item\"><\/div>\r\n            <div class=\"item\"><\/div>\r\n            <div class=\"item\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
\"\"<\/p>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » flex\u5b9e\u73b0\u7b5b\u5b50\u5e03\u5c40<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[28,178,29],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2349"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2349"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2349\/revisions"}],"predecessor-version":[{"id":2351,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2349\/revisions\/2351"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2349"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}