{"id":1141,"date":"2023-06-08T15:59:31","date_gmt":"2023-06-08T07:59:31","guid":{"rendered":"https:\/\/log.tanxiaodian.com\/?p=1141"},"modified":"2023-06-08T15:59:31","modified_gmt":"2023-06-08T07:59:31","slug":"%e5%af%b9flex%e5%bc%b9%e6%80%a7%e7%9b%92%e5%ad%90%e5%b8%83%e5%b1%80%e7%9a%84%e5%86%8d%e6%ac%a1%e5%ad%a6%e4%b9%a0","status":"publish","type":"post","link":"https:\/\/log.tanxiaodian.com\/?p=1141","title":{"rendered":"\u5bf9flex\u5f39\u6027\u76d2\u5b50\u5e03\u5c40\u7684\u518d\u6b21\u5b66\u4e60"},"content":{"rendered":"\n<p><strong>\u5b66\u4e60\u8d44\u6e90:<\/strong><strong><\/strong><\/p>\n\n\n\n<p>flex\u5e03\u5c40\uff08\u8be6\u89e3\uff09 &nbsp;https:\/\/blog.csdn.net\/wwwjjjjj666\/article\/details\/128033184<\/p>\n\n\n\n<p><strong>\u7b14\u8bb0<\/strong><strong><\/strong><\/p>\n\n\n\n<p>Flex<\/p>\n\n\n\n<p>\u89e3\u51b3\u7684\u95ee\u9898 &nbsp;\u4f20\u7edf\u7684\u76d2\u5b50\u6a21\u578b\u5bf9\u4e8e\u7279\u6b8a\u7684\u4e00\u4e9b\u5e03\u5c40\u975e\u5e38\u4e0d\u65b9\u4fbf\u6bd4\u5982 &nbsp;\u5782\u76f4\u5c45\u4e2d\u5c31\u6bd4\u8f83\u9ebb\u70e6<\/p>\n\n\n\n<p>2009\u5e74 &nbsp;W3C\u63d0\u51fa\u4e86\u65b0\u7684\u5e03\u5c40\u65b9\u6848 &nbsp;&nbsp;Flex\u5e03\u5c40\uff0c\u53ef\u4ee5\u7b80\u4fbf &nbsp;\u5b8c\u6574 \u54cd\u5e94\u5f0f\u5730\u5b9e\u73b0\u5404\u79cd\u9875\u9762\u5e03\u5c40<\/p>\n\n\n\n<p>\u5b83\u7684\u5168\u79f0\u662f &nbsp;Flexible Box &nbsp;&nbsp;\u610f\u601d\u4e3a\u5f39\u6027\u76d2\u5b50<\/p>\n\n\n\n<p>\u6307\u5b9a\u4e00\u4e2a\u5bb9\u5668\u4e3aFlex\u5e03\u5c40<\/p>\n\n\n\n<p>.box{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;display: flex;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>\u884c\u5185\u5143\u7d20\u4f7f\u7528Flex\u5e03\u5c40<\/p>\n\n\n\n<p>.box{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;display:inline-flex;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>webkit\u5185\u6838\u7684\u6d4f\u89c8\u5668\u5fc5\u987b\u52a0\u4e0a &nbsp;-webkit\u524d\u7f00<\/p>\n\n\n\n<p>.box{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;display:-webit-flex;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;display:flex;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>\u6bd4\u5982\u8c37\u6b4c<\/p>\n\n\n\n<p><strong>\u57fa\u672c\u6982\u5ff5<\/strong><strong><\/strong><\/p>\n\n\n\n<p>\u91c7\u7528Flex\u5e03\u5c40\u7684\u5143\u7d20,\u79f0\u4e3aFlex\u5bb9\u5668 &nbsp;flex container,\u5b83\u7684\u6240\u6709\u5b50\u5143\u7d20\u81ea\u52a8\u6210\u4e3a\u5bb9\u5668\u6210\u5458flex item\u6210\u4e3aFlex\u9879\u76ee<\/p>\n\n\n\n<p>\u5bb9\u5668<strong>\u9ed8\u8ba4<\/strong>\u5b58\u5728\u4e24\u6839\u8f74: &nbsp;\u6c34\u5e73\u4e3b\u8f74 main axis \u548c \u5782\u76f4\u4ea4\u53c9\u8f74cross axis<\/p>\n\n\n\n<p>\u4e3b\u8f74\u5f00\u59cb\u4f4d\u7f6e\u53eb\u505amain start &nbsp;\u7ed3\u675f\u4f4d\u7f6e\u53eb\u505amain end<\/p>\n\n\n\n<p>\u4ea4\u53c9\u8f74\u5f00\u59cb\u4f4d\u7f6e\u53eb\u505a cross start \u7ed3\u675f\u4f4d\u7f6e\u53eb\u505a main end<\/p>\n\n\n\n<p>\u9879\u76ee\u9ed8\u8ba4\u6cbf\u7740\u4e3b\u8f74\u6392\u5217\u3002\u5355\u4e2a\u9879\u76eeflex item \u624e\u636e\u7684\u4e3b\u8f74\u7a7a\u95f4\u53eb\u505amain size &nbsp;\u5360\u636e\u7684\u4ea4\u53c9\u8f74\u7a7a\u95f4\u53eb\u505across size<\/p>\n\n\n\n<p><strong>\u5bb9\u5668<\/strong><strong>\u7684\u5c5e\u6027<\/strong><strong><\/strong><\/p>\n\n\n\n<p>6\u4e2a\u5c5e\u6027:flex-direction &nbsp;flex-wrap &nbsp;flex-flow &nbsp;&nbsp;justify-content &nbsp;align-items &nbsp;align-content<\/p>\n\n\n\n<ol type=\"1\"><li>flex-direction<\/li><\/ol>\n\n\n\n<p>\u51b3\u5b9a\u4e3b\u8f74\u65b9\u5411(\u65e2\u662f\u9879\u76ee\u6392\u5217\u65b9\u5411) &nbsp;row &nbsp;row-reverse &nbsp;column &nbsp;column-reverse<\/p>\n\n\n\n<ul><li>flex-wrap<\/li><\/ul>\n\n\n\n<p>\u5b9a\u4e49\u5982\u679c\u8f74\u7ebf\u6392\u5217\u4e0d\u4e0b\u5982\u4f55\u6362\u884c nowrap(\u9ed8\u8ba4) &nbsp;wrap &nbsp;&nbsp;wrap-reverse<\/p>\n\n\n\n<p>\u6548\u679c<\/p>\n\n\n\n<p>\u4e3b\u8f74\u5982\u679c\u662f\u6a2a\u5411\u7684 \u8bbe\u7f6e\u4e3awrap\u65f6 \u4ece\u4e0a\u5230\u4e0b\u6362\u884c<\/p>\n\n\n\n<p>flex-direction:row \u00a0\u00a0\u00a0flex-wrap:wrap<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"607\" height=\"366\" src=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image.png\" alt=\"\" class=\"wp-image-1143\" srcset=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image.png 607w, https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-300x181.png 300w\" sizes=\"(max-width: 607px) 100vw, 607px\" \/><\/figure>\n\n\n\n<p>\u4e3b\u8f74\u5982\u679c\u662f\u6a2a\u5411\u7684 \u8bbe\u7f6e\u4e3awrap-reverse\u65f6 \u4ece\u4e0b\u5230\u4e0a\u6362\u884c<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"636\" height=\"371\" src=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-1.png\" alt=\"\" class=\"wp-image-1144\" srcset=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-1.png 636w, https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-1-300x175.png 300w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/figure>\n\n\n\n<p>\u4e3b\u8f74\u5982\u679c\u662f\u7eb5\u5411\u7684\u8bbe\u7f6e\u4e3awrap \u65f6 \u00a0\u4ece\u5de6\u5f80\u53f3\u6362\u884c<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"620\" height=\"396\" src=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-2.png\" alt=\"\" class=\"wp-image-1145\" srcset=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-2.png 620w, https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-2-300x192.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/figure>\n\n\n\n<p>\u4e3b\u8f74\u5982\u679c\u662f\u7eb5\u5411\u7684\u8bbe\u7f6e\u4e3awrap-reverse\u65f6 \u00a0\u4ece\u53f3\u5f80\u5de6\u6362\u884c<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"634\" height=\"412\" src=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-3.png\" alt=\"\" class=\"wp-image-1146\" srcset=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-3.png 634w, https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-3-300x195.png 300w\" sizes=\"(max-width: 634px) 100vw, 634px\" \/><\/figure>\n\n\n\n<ul><li>flex-flow<\/li><\/ul>\n\n\n\n<p>\u662fflex-direction\u5c5e\u6027\u548cflex-wrap\u5c5e\u6027\u7684\u7b80\u5199<\/p>\n\n\n\n<p>\u5982flex-flow:row &nbsp;wrap<\/p>\n\n\n\n<ul><li>justify-content<\/li><\/ul>\n\n\n\n<p>\u5b9a\u4e49\u4e3b\u8f74\u5bf9\u9f50\u65b9\u5f0f &nbsp;flex-start &nbsp;flex-end &nbsp;center &nbsp;space-between &nbsp;space-around<\/p>\n\n\n\n<p>5.align-items<\/p>\n\n\n\n<p>\u5b9a\u4e49\u4ea4\u53c9\u8f74\u5bf9\u9f50\u65b9\u5f0f &nbsp;flex-start &nbsp;&nbsp;flex-end &nbsp;center &nbsp;&nbsp;<\/p>\n\n\n\n<p>baseline(\u9879\u76ee\u7b2c\u4e00\u884c\u6587\u5b57\u57fa\u7ebf\u5bf9\u9f50) \u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"607\" height=\"346\" src=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-4.png\" alt=\"\" class=\"wp-image-1147\" srcset=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-4.png 607w, https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-4-300x171.png 300w\" sizes=\"(max-width: 607px) 100vw, 607px\" \/><\/figure>\n\n\n\n<p>stretch<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"441\" height=\"757\" src=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-5.png\" alt=\"\" class=\"wp-image-1148\" srcset=\"https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-5.png 441w, https:\/\/log.tanxiaodian.com\/wp-content\/uploads\/2023\/06\/image-5-175x300.png 175w\" sizes=\"(max-width: 441px) 100vw, 441px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ul><li>align-center<\/li><\/ul>\n\n\n\n<p><strong>\u9879\u76ee\u7684\u5c5e\u6027<\/strong><strong><\/strong><\/p>\n\n\n\n<p>6\u4e2a\u5c5e\u6027 order &nbsp;flex-grow &nbsp;flex-shrink &nbsp;flex-basis &nbsp;flex &nbsp;align-self<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5b66\u4e60\u8d44\u6e90: flex\u5e03\u5c40\uff08\u8be6\u89e3\uff09 &nbsp;ht&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/log.tanxiaodian.com\/?p=1141\">Continue reading<span class=\"screen-reader-text\">\u5bf9flex\u5f39\u6027\u76d2\u5b50\u5e03\u5c40\u7684\u518d\u6b21\u5b66\u4e60<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/log.tanxiaodian.com\/index.php?rest_route=\/wp\/v2\/posts\/1141"}],"collection":[{"href":"https:\/\/log.tanxiaodian.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/log.tanxiaodian.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/log.tanxiaodian.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/log.tanxiaodian.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1141"}],"version-history":[{"count":1,"href":"https:\/\/log.tanxiaodian.com\/index.php?rest_route=\/wp\/v2\/posts\/1141\/revisions"}],"predecessor-version":[{"id":1149,"href":"https:\/\/log.tanxiaodian.com\/index.php?rest_route=\/wp\/v2\/posts\/1141\/revisions\/1149"}],"wp:attachment":[{"href":"https:\/\/log.tanxiaodian.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/log.tanxiaodian.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/log.tanxiaodian.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}