{"id":515,"date":"2019-04-18T18:51:12","date_gmt":"2019-04-18T10:51:12","guid":{"rendered":"https:\/\/chenbing.name\/?p=515"},"modified":"2020-05-22T15:08:23","modified_gmt":"2020-05-22T07:08:23","slug":"flex%e5%bc%b9%e6%80%a7%e7%9b%92%e5%ad%90%e5%b8%83%e5%b1%80%e9%87%8d%e7%82%b9","status":"publish","type":"post","link":"https:\/\/chenbing.name\/blog\/515\/","title":{"rendered":"flex\u5f39\u6027\u76d2\u5b50\u5e03\u5c40\u91cd\u70b9"},"content":{"rendered":"

flex\u5f39\u6027\u76d2\u5b50\u5e03\u5c40\uff0c\u91cd\u70b9\u603b\u7ed3\u5907\u5fd8\uff1a<\/p>\n

\u5168\u90e8\u5c5e\u6027\uff0c\u4e00\u5171 12 \u4e2a\uff0c\u7236\u5bb9\u5668\u3001\u5b50\u5bb9\u5668\u5404 6 \u4e2a\uff0c\u5982\u4e0b\u56fe\uff1a<\/p>\n

\"\"<\/a>
\n\"\"<\/p>\n

\u7236\u5bb9\u5668\uff0c\u4e0b\u9762\u516d\u79cd\u5c5e\u6027\u53ef\u4ee5\u8bbe\u7f6e\uff1a<\/h3>\n
    \n
  1. flex-direction <\/strong>
    \n\u51b3\u5b9a\u4e3b\u8f74\u7684\u65b9\u5411(\u5373\u9879\u76ee\u7684\u6392\u5217\u65b9\u5411)<\/li>\n<\/ol>\n
    \n
     row | row-reverse | column | column-reverse;<\/code><\/pre>\n<\/div>\n
      \n
    1. flex-wrap<\/strong>
      \n\u51b3\u5b9a\u5bb9\u5668\u5185\u9879\u76ee\u662f\u5426\u53ef\u6362\u884c<\/li>\n<\/ol>\n
      \n
      nowrap | wrap | wrap-reverse;<\/code><\/pre>\n<\/div>\n
        \n
      1. flex-flow<\/strong>
        \nlex-direction \u548c flex-wrap \u7684\u7b80\u5199\u5f62\u5f0f<\/li>\n
      2. justify-content<\/strong>
        \n\u5b9a\u4e49\u4e86\u9879\u76ee\u5728\u4e3b\u8f74\u7684\u5bf9\u9f50\u65b9\u5f0f\u3002<\/li>\n<\/ol>\n
        \n
        justify-content: flex-start | flex-end | center | space-between | space-around;<\/code><\/pre>\n<\/div>\n
          \n
        1. align-items<\/strong>
          \n\u5b9a\u4e49\u4e86\u9879\u76ee\u5728\u4ea4\u53c9\u8f74\u4e0a\u7684\u5bf9\u9f50\u65b9\u5f0f<\/li>\n<\/ol>\n
          \n
          flex-start | flex-end | center | baseline | stretch;<\/code><\/pre>\n<\/div>\n
            \n
          1. align-content<\/strong>
            \n\u5b9a\u4e49\u4e86\u591a\u6839\u8f74\u7ebf\u7684\u5bf9\u9f50\u65b9\u5f0f\uff0c\u5982\u679c\u9879\u76ee\u53ea\u6709\u4e00\u6839\u8f74\u7ebf\uff0c\u90a3\u4e48\u8be5\u5c5e\u6027\u5c06\u4e0d\u8d77\u4f5c\u7528<\/li>\n<\/ol>\n
            \n
            flex-start | flex-end | center | space-between | space-around | stretch;<\/code><\/pre>\n<\/div>\n
            \u5b50\u9879\u76eeitem\uff0c\u4e0b\u9762\u516d\u79cd\u5c5e\u6027\u53ef\u4ee5\u8bbe\u7f6e\uff1a<\/h3>\n
              \n
            1. order <\/strong>
              \n\u5b9a\u4e49\u9879\u76ee\u5728\u5bb9\u5668\u4e2d\u7684\u6392\u5217\u987a\u5e8f\uff0c\u6570\u503c\u8d8a\u5c0f\uff0c\u6392\u5217\u8d8a\u9760\u524d\uff0c\u9ed8\u8ba4\u503c\u4e3a 0<\/li>\n<\/ol>\n
              \n
              .item {\n    order: <integer>;\n}<\/code><\/pre>\n<\/div>\n
                \n
              1. flex-basis<\/strong>
                \n\u5b9a\u4e49\u4e86\u5728\u5206\u914d\u591a\u4f59\u7a7a\u95f4\u4e4b\u524d\uff0c\u9879\u76ee\u5360\u636e\u7684\u4e3b\u8f74\u7a7a\u95f4\uff0c\u6d4f\u89c8\u5668\u6839\u636e\u8fd9\u4e2a\u5c5e\u6027\uff0c\u8ba1\u7b97\u4e3b\u8f74\u662f\u5426\u6709\u591a\u4f59\u7a7a\u95f4<\/li>\n<\/ol>\n
                \n
                .item {\n    flex-basis: <length> | auto;\n}<\/code><\/pre>\n<\/div>\n
                  \n
                1. flex-grow <\/strong>
                  \n\u5b9a\u4e49\u9879\u76ee\u7684\u653e\u5927\u6bd4\u4f8b<\/li>\n<\/ol>\n
                  \n
                  .item {\n    flex-grow: <number>;\n}<\/code><\/pre>\n<\/div>\n
                    \n
                  1. flex-shrink <\/strong>
                    \n\u5b9a\u4e49\u4e86\u9879\u76ee\u7684\u7f29\u5c0f\u6bd4\u4f8b<\/li>\n<\/ol>\n
                    \n
                    .item {\n    flex-shrink: <number>;\n}<\/code><\/pre>\n<\/div>\n
                      \n
                    1. flex <\/strong>
                      \nflex-grow, flex-shrink \u548c flex-basis\u7684\u7b80\u5199<\/li>\n<\/ol>\n
                      \n
                      .item{\n    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]\n}<\/code><\/pre>\n<\/div>\n
                        \n
                      1. align-self <\/strong>
                        \n\u5141\u8bb8\u5355\u4e2a\u9879\u76ee\u6709\u4e0e\u5176\u4ed6\u9879\u76ee\u4e0d\u4e00\u6837\u7684\u5bf9\u9f50\u65b9\u5f0f<\/li>\n<\/ol>\n
                        \n
                        auto | flex-start | flex-end | center | baseline | stretch;<\/code><\/pre>\n<\/div>\n
                        <\/div>\n
                        <\/div>\n
                        \n
                        <\/div>\n
                        <\/div>\n
                        <\/div>\n
                        <\/div>\n
                        <\/div>\n<\/div>\n
                        \n
                        <\/div>\n
                        <\/div>\n
                        <\/div>\n
                        <\/div>\n
                        <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                        flex\u5f39\u6027\u76d2\u5b50\u5e03\u5c40\uff0c\u91cd\u70b9\u603b\u7ed3\u5907\u5fd8\uff1a \u5168\u90e8\u5c5e\u6027\uff0c\u4e00\u5171 12 \u4e2a\uff0c\u7236\u5bb9\u5668\u3001\u5b50\u5bb9\u5668\u5404 6 \u4e2a\uff0c\u5982\u4e0b\u56fe\uff1a<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[94,4],"tags":[67,68,69,70],"class_list":{"0":"post-515","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-web_front","7":"category-skill","8":"tag-css-flex","9":"tag-flex","11":"tag-70"},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/chenbing.name\/blog\/wp-json\/wp\/v2\/posts\/515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chenbing.name\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chenbing.name\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chenbing.name\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chenbing.name\/blog\/wp-json\/wp\/v2\/comments?post=515"}],"version-history":[{"count":1,"href":"https:\/\/chenbing.name\/blog\/wp-json\/wp\/v2\/posts\/515\/revisions"}],"predecessor-version":[{"id":715,"href":"https:\/\/chenbing.name\/blog\/wp-json\/wp\/v2\/posts\/515\/revisions\/715"}],"wp:attachment":[{"href":"https:\/\/chenbing.name\/blog\/wp-json\/wp\/v2\/media?parent=515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chenbing.name\/blog\/wp-json\/wp\/v2\/categories?post=515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chenbing.name\/blog\/wp-json\/wp\/v2\/tags?post=515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}