<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u7236\u5143\u7d20\u5fc5\u987b\u5148\u5199 \u6548\u679c\uff1a\u5de6\u53f3\u56fa\u5b9a 100px\uff0c\u4e2d\u95f4\u81ea\u52a8\u586b\u5145\u5269\u4e0b\u5168\u90e8\u5bbd\u5ea6\u3002<\/p>\n\n\n\n \u4e09\u4e2a\u76d2\u5b50\u5e73\u5206\u6574\u884c\u5bbd\u5ea6\uff0c\u4e09\u7b49\u5206\u3002<\/p>\n\n\n\n \u603b\u6743\u91cd = 1+2=3\uff1b<\/p>\n\n\n\n \u5269\u4f59\u7a7a\u95f4\uff1a\u7b2c\u4e00\u4e2a\u62ff 1\/3\uff0c\u7b2c\u4e8c\u4e2a\u62ff 2\/3\u3002<\/p>\n\n\n\n \u65e5\u5e38\u4e0d\u4f1a\u5355\u72ec\u5199 \u63a8\u8350\u76f4\u63a5\u7528 <\/p>\n","protected":false},"excerpt":{"rendered":" 1. \u4f5c\u7528 flex-grow \u662f\u5f39\u6027\u5b50\u9879\u5c5e\u6027\uff0c\u63a7..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,11],"tags":[40,39],"class_list":["post-509","post","type-post","status-publish","format-standard","hentry","category-css","category-front","tag-css","tag-flex"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"author_info":{"info":["\u9648 \u67d0\u4eba"]},"category_info":"CSS<\/a> \u524d\u7aef<\/a>","tag_info":"\u524d\u7aef","comment_count":"0","_links":{"self":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/comments?post=509"}],"version-history":[{"count":1,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/509\/revisions"}],"predecessor-version":[{"id":510,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/509\/revisions\/510"}],"wp:attachment":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/media?parent=509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/categories?post=509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/tags?post=509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}flex-grow<\/code> \u662f\u5f39\u6027\u5b50\u9879\u5c5e\u6027\uff0c\u63a7\u5236\u5269\u4f59\u7a7a\u95f4\u5982\u4f55\u5206\u914d<\/strong>\uff1a<\/p>\n\n\n\n\n
flex-grow: 0<\/code>\uff1a\u5b50\u9879\u4e0d\u81ea\u52a8\u5360\u5269\u4f59\u5bbd\u5ea6\uff0c\u5bbd\u5ea6\u7531\u81ea\u8eab\u5185\u5bb9\u51b3\u5b9a\uff1b<\/li>\n\n\n\nflex-grow: 1<\/code>\uff1a\u5e73\u5206\u7236\u5bb9\u5668\u6240\u6709\u5269\u4f59\u7a7a\u767d\u533a\u57df\uff0c\u586b\u6ee1\u4e00\u884c\u3002<\/li>\n<\/ul>\n\n\n\n2. \u4f7f\u7528\u524d\u63d0<\/h2>\n\n\n\n
display: flex<\/code>\uff0c\u5b50\u5143\u7d20\u624d\u80fd\u751f\u6548\u3002<\/p>\n\n\n\n3. \u57fa\u7840\u573a\u666f\u4f7f\u7528<\/h2>\n\n\n\n
\u573a\u666f 1\uff1a\u5de6\u53f3\u4e24\u5757\uff0c\u4e2d\u95f4\u81ea\u52a8\u6491\u6ee1\uff08\u6700\u5e38\u7528\uff09<\/h3>\n\n\n\n
<div style=\"display:flex; width:100%;\">
<div style=\"width:100px;\">\u5de6\u4fa7\u56fa\u5b9a<\/div>
<!-- flex-grow:1 \u5403\u6389\u4e2d\u95f4\u6240\u6709\u7a7a\u767d -->
<div style=\"flex-grow:1;\">\u4e2d\u95f4\u81ea\u9002\u5e94\u586b\u6ee1<\/div>
<div style=\"width:100px;\">\u53f3\u4fa7\u56fa\u5b9a<\/div>
<\/div><\/code><\/pre>\n\n\n\n\u573a\u666f 2\uff1a\u591a\u5143\u7d20\u5747\u5206\u5bbd\u5ea6<\/h3>\n\n\n\n
<div style=\"display:flex;\">
<div style=\"flex-grow:1;\">A<\/div>
<div style=\"flex-grow:1;\">B<\/div>
<div style=\"flex-grow:1;\">C<\/div>
<\/div><\/code><\/pre>\n\n\n\n\u573a\u666f 3\uff1a\u6bd4\u4f8b\u5206\u914d\u7a7a\u95f4\uff08\u6570\u5b57\u4ee3\u8868\u6743\u91cd\uff09<\/h3>\n\n\n\n
<div style=\"display:flex;\">
<div style=\"flex-grow:1;\">\u53601\u4efd<\/div>
<div style=\"flex-grow:2;\">\u53602\u4efd<\/div>
<\/div><\/code><\/pre>\n\n\n\n4. \u7b80\u5199 flex: 1<\/h2>\n\n\n\n
flex-grow:1<\/code>\uff0c\u7edf\u4e00\u7b80\u5199\uff1a<\/p>\n\n\n\nflex: 1;
\/* \u7b49\u4ef7\u4e8e *\/
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;<\/code><\/pre>\n\n\n\nflex:1<\/code>\u3002<\/p>\n\n\n\n5. \u4e1a\u52a1\u573a\u666f<\/h2>\n\n\n\n
\n
<div style=\"display:flex;align-items:center;\">
<span>\u5173\u952e\u8bcd\uff1a<\/span>
<input style=\"flex:1;margin:0 10px;\" \/>
<button>\u67e5\u8be2<\/button>
<\/div><\/code><\/pre>\n\n\n\n\n
<div style=\"display:flex;height:100vh;\">
<div style=\"width:220px;background:#f5f5f5;\">\u4fa7\u8fb9\u680f<\/div>
<div style=\"flex:1;\">\u4e3b\u4f53\u5185\u5bb9\uff0c\u81ea\u52a8\u5360\u6ee1\u5269\u4f59\u9ad8\u5ea6<\/div>
<\/div><\/code><\/pre>\n\n\n\n\n
<div style=\"display:flex;justify-content:space-between;align-items:center;\">
<h3>\u6807\u9898<\/h3>
<div>\u64cd\u4f5c\u6309\u94ae<\/div>
<\/div>
\/* \u6362\u6210flex-grow\u5199\u6cd5\uff0c\u6548\u679c\u4e00\u6837 *\/
<div style=\"display:flex;align-items:center;\">
<h3 style=\"flex:1;margin:0;\">\u6807\u9898<\/h3>
<div>\u64cd\u4f5c\u6309\u94ae<\/div>
<\/div><\/code><\/pre>\n\n\n\n6. \u5173\u952e\u6ce8\u610f\u70b9<\/h2>\n\n\n\n
\n
display:flex<\/code> \u7f3a\u4e00\u4e0d\u53ef\uff1b<\/li>\n\n\n\noverflow:hidden<\/code> \u6587\u5b57\u7701\u7565\uff1b<\/li>\n<\/ol>\n\n\n\nflex:1;\noverflow: hidden;\ntext-overflow: ellipsis;\nwhite-space: nowrap;<\/code><\/pre>\n\n\n\n