{"id":16,"date":"2026-06-23T12:58:19","date_gmt":"2026-06-23T04:58:19","guid":{"rendered":"http:\/\/www.mh707.cn\/2026\/06\/23\/css-flexbox-%e5%b8%83%e5%b1%80%e5%ae%9e%e6%88%98%ef%bc%9a%e5%87%a0%e4%b8%aa%e5%b8%b8%e7%94%a8%e6%a8%a1%e5%bc%8f%e4%b8%80%e6%ac%a1%e8%ae%b2%e6%b8%85\/"},"modified":"2026-06-24T13:46:09","modified_gmt":"2026-06-24T05:46:09","slug":"css-flexbox-%e5%b8%83%e5%b1%80%e5%ae%9e%e6%88%98%ef%bc%9a%e5%87%a0%e4%b8%aa%e5%b8%b8%e7%94%a8%e6%a8%a1%e5%bc%8f%e4%b8%80%e6%ac%a1%e8%ae%b2%e6%b8%85","status":"publish","type":"post","link":"https:\/\/www.mh707.cn\/home\/css-flexbox-%e5%b8%83%e5%b1%80%e5%ae%9e%e6%88%98%ef%bc%9a%e5%87%a0%e4%b8%aa%e5%b8%b8%e7%94%a8%e6%a8%a1%e5%bc%8f%e4%b8%80%e6%ac%a1%e8%ae%b2%e6%b8%85\/","title":{"rendered":"CSS Flexbox \u5e03\u5c40\u5b9e\u6218\uff1a\u51e0\u4e2a\u5e38\u7528\u6a21\u5f0f\u4e00\u6b21\u8bb2\u6e05"},"content":{"rendered":"

\u524d\u7aef\u5e03\u5c40\u7ecf\u5386\u4e86 table\u3001float\u3001position \u7684\u9ed1\u6697\u65f6\u4ee3\uff0c\u7ec8\u4e8e\u8fce\u6765\u4e86 Flexbox\u3002\u8fd9\u7bc7\u6587\u7ae0\u4e0d\u8bb2\u6587\u6863\uff0c\u53ea\u8bb2\u51e0\u4e2a\u5b9e\u9645\u9879\u76ee\u4e2d\u53cd\u590d\u7528\u5230\u7684\u5e03\u5c40\u6a21\u5f0f\u3002<\/p>\n

\u6c34\u5e73\u5c45\u4e2d + \u5782\u76f4\u5c45\u4e2d<\/h2>\n

\u5343\u53e4\u96be\u9898\u4e00\u884c\u89e3\u51b3\uff1a<\/p>\n

.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}<\/code><\/pre>\n
\u4e0d\u7ba1\u5b50\u5143\u7d20\u662f\u6587\u5b57\u3001\u56fe\u7247\u8fd8\u662f div\uff0c\u7edf\u7edf\u5c45\u4e2d\u3002<\/p>\n
\u5de6\u53f3\u4e24\u680f\uff0c\u5de6\u8fb9\u56fa\u5b9a\u53f3\u8fb9\u81ea\u9002\u5e94<\/h2>\n
\u7ecf\u5178 sidebar + content \u5e03\u5c40\uff1a<\/p>\n
.layout {\n  display: flex;\n}\n.sidebar { width: 260px; flex-shrink: 0; }\n.content { flex: 1; }<\/code><\/pre>\n
flex-shrink: 0 \u4fdd\u8bc1\u4fa7\u680f\u4e0d\u7f29\u6c34\uff0cflex: 1 \u8ba9\u5185\u5bb9\u533a\u5360\u6ee1\u5269\u4f59\u7a7a\u95f4\u3002<\/p>\n
\u5361\u7247\u5217\u8868\u81ea\u52a8\u6362\u884c<\/h2>\n
\u4e0d\u7528\u7b97\u5bbd\u5ea6\u3001\u4e0d\u7528\u5a92\u4f53\u67e5\u8be2\uff0cflex-wrap \u641e\u5b9a\uff1a<\/p>\n
.card-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n}\n.card { flex: 1 1 280px; }<\/code><\/pre>\n
\u6bcf\u4e2a\u5361\u7247\u6700\u5c0f 280px\uff0c\u7a7a\u95f4\u4e0d\u591f\u81ea\u52a8\u6362\u884c\u3002gap \u5c5e\u6027\u66ff\u4ee3\u4e86 margin \u7684\u7e41\u7410\u5199\u6cd5\u3002<\/p>\n
\u5e95\u90e8\u5bf9\u9f50<\/h2>\n
\u5361\u7247\u91cc\u6807\u9898\u5728\u4e0a\u3001\u6309\u94ae\u5728\u5e95\uff1a<\/p>\n
.card {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}<\/code><\/pre>\n
\u6700\u540e<\/h2>\n
Flexbox \u7684\u6838\u5fc3\u7406\u5ff5\u5c31\u4e00\u53e5\u8bdd\uff1a\u5bb9\u5668\u63a7\u5236\u5b50\u5143\u7d20\u7684\u6392\u5217\u65b9\u5f0f<\/strong>\u3002\u7406\u89e3\u4e86\u4e3b\u8f74\u548c\u4ea4\u53c9\u8f74\uff0c\u5269\u4e0b\u5c31\u662f\u67e5\u6587\u6863\u7684\u4e8b\u4e86\u3002\u914d\u5408 Gap \u5c5e\u6027\u548c flex \u7f29\u5199\uff0c\u5927\u90e8\u5206\u5e03\u5c40\u4e0d\u9700\u8981\u518d\u5199 float \u4e86\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u524d\u7aef\u5e03\u5c40\u7ecf\u5386\u4e86 table\u3001float\u3001position \u7684\u9ed1\u6697\u65f6\u4ee3\uff0c\u7ec8\u4e8e\u8fce\u6765\u4e86 Flexbox\u3002\u8fd9\u7bc7\u6587\u7ae0\u4e0d\u8bb2 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-16","post","type-post","status-publish","format-standard","hentry","category-7"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.mh707.cn\/home\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mh707.cn\/home\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mh707.cn\/home\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mh707.cn\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mh707.cn\/home\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":1,"href":"https:\/\/www.mh707.cn\/home\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/www.mh707.cn\/home\/wp-json\/wp\/v2\/posts\/16\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/www.mh707.cn\/home\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mh707.cn\/home\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mh707.cn\/home\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}