{"id":1584,"date":"2022-09-18T12:16:51","date_gmt":"2022-09-18T04:16:51","guid":{"rendered":"https:\/\/zhuxinyong.com\/?p=1584"},"modified":"2022-09-29T17:54:57","modified_gmt":"2022-09-29T09:54:57","slug":"css-zhong-flexgrow-he-flexshrink-de-ji-suan-bi-li","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=1584","title":{"rendered":"CSS \u4e2d flex-grow \u548c flex-shrink \u7684\u8ba1\u7b97\u6bd4\u4f8b"},"content":{"rendered":"

\"flex\"<\/p>\n

\u6709\u65f6\u5019\u8fd9\u4e2a\u7684\u8ba1\u7b97\u6bd4\u4f8b\u81ea\u5df1\u4e5f\u633a\u8ff7\u7cca\u7684\uff0c\u8fd9\u6b21\u518d\u590d\u4e60\u4e00\u4e0b\u3002\u672c\u6b21\u6587\u7ae0\u5206\u4e24\u90e8\u5206\uff1a<\/p>\n

    \n
  1. \u5bb9\u5668\u7684\u5bbd\u5ea6\u5927\u4e8e\u5b50\u5143\u7d20\u5bbd\u5ea6\u4e4b\u548c\u3002<\/li>\n
  2. \u5bb9\u5668\u7684\u5bbd\u5ea6\u5c0f\u4e8e\u5b50\u5143\u7d20\u5bbd\u5ea6\u4e4b\u548c\u3002<\/li>\n<\/ol>\n

    <\/a>\u57fa\u7840\u7ed3\u6784<\/h3>\n
    <div class=\"wrap\">\n  <div><\/div>\n  <div><\/div>\n<\/div>\n<\/code><\/pre>\n
    <\/a>\u5bbd\u5ea6\u5927<\/h3>\n
    .wrap {\n  width: 800px;\n  height: 400px;\n  background: #999;\n  display: flex;\n}\n.wrap div:nth-child(1) {\n  flex-basis: 200px;\n  flex-grow: 1;\n  background: blue;\n}\n\n.wrap div:nth-child(2) {\n  flex-basis: 200px;\n  flex-grow: 3;\n  background: pink;\n}\n<\/code><\/pre>\n
    \u73b0\u5728\u6bcf\u4e2a\u5b50\u5143\u7d20\u7684\u5bbd\u5ea6\u5e94\u8be5\u662f\u591a\u5c11\u5462\uff1f\u770b\u4e0b\u56fe\uff1a<\/p>\n
    \u9996\u5148\uff1a\u7528\u7236\u5143\u7d20\u7684\u5bbd\u5ea6\u5206\u522b\u51cf\u53bb\u5b50\u5143\u7d20\u7684\u5bbd\u5ea6\u3002<\/p>\n
    \"\"\"\"<\/p>\n
    \u8be5\u503c\u6839\u636e flex-grow<\/code> \u4e4b\u548c\u8ba1\u7b97\u6bcf\u4e00\u4efd\u7684\u5c3a\u5bf8\uff1a400\/(1+3) = 100<\/code><\/p>\n
    \"\"\"\"<\/p>\n
    \u6bcf\u4e00\u4efd 100px<\/code> \uff0c\u6700\u540e\u4e58\u4ee5 flex-grow<\/code> \u7684\u503c\u5206\u522b\u52a0\u5230\u5bf9\u5e94\u7684\u5143\u7d20\u4e0a\uff1a<\/p>\n
    <\/a>\u7b2c\u4e00\u4e2a div \uff1a<\/h4>\n
    200 + 100 * 1 = 300 \n<\/code><\/pre>\n
    <\/a>\u7b2c\u4e8c\u4e2a div\uff1a<\/h4>\n
    200 + 100 * 3 = 500\n<\/code><\/pre>\n
    \"\"\"\"<\/p>\n
    <\/a>\u5bbd\u5ea6\u5c0f<\/h3>\n
    .wrap {\n  width: 200px;\n  height: 400px;\n  background: #999;\n  display: flex;\n}\n\n.wrap div:nth-child(1) {\n  flex-basis: 200px;\n  flex-shrink:1;\n  background: blue;\n}\n\n.wrap div:nth-child(2) {\n  flex-basis: 200px;\n  flex-shrink:3;\n  background: pink;\n}\n<\/code><\/pre>\n
    \u73b0\u5728\u7236\u5143\u7d20\u603b\u5bbd\uff1a200px<\/code> \u5c0f\u4e8e \u5b50\u5143\u7d20\u4e4b\u548c\uff1a200 + 200<\/code>\uff0c\u90a3\u5c31\u8981\u6839\u636e\u7f29\u653e\u6bd4\u4f8b\u6765\u7f29\u653e\u5b50\u5143\u7d20\u3002\u8ba1\u7b97\u516c\u5f0f\u5982\u4e0b\uff1a<\/p>\n
    \uff08200 + 200) - 200 = 200\n<\/code><\/pre>\n
    \u8fd9 200 \u5c31\u8981\u6839\u636e flex-shrink<\/code> \u4e4b\u548c\u6765\u5206\uff1a<\/p>\n
    200 \/ (1 + 3) = 50\n<\/code><\/pre>\n
    \u6bcf\u4e00\u4efd 50 \uff1a<\/p>\n
    <\/a>\u7b2c\u4e00\u4e2a div\uff1a<\/h4>\n
    200 - 1 * 50 = 150\n<\/code><\/pre>\n
    <\/a>\u7b2c\u4e8c\u4e2a div:<\/h4>\n
    200 - 3 * 50 = 50\n<\/code><\/pre>\n
    \u603b\u4f53\u601d\u8def\u5c31\u662f\u5bb9\u5668\u7684\u5bbd\u5ea6\u4e0e\u5b50\u5143\u7d20\u5bbd\u5ea6\u4e4b\u548c\u6bd4\u8f83\uff0c\u5dee\u503c\u7136\u540e\u6839\u636e\u7f29\u653e\u6bd4\u4f8b\u5206\u914d\u3002\u518d\u6839\u636e\u6bcf\u4e2a\u7684\u6bd4\u4f8b\u589e\u52a0\u6216\u51cf\u5c11\u6700\u540e\u5c31\u662f\u5404\u4e2a\u5b50\u5143\u7d20\u5bf9\u5e94\u7684\u5c3a\u5bf8\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u6709\u65f6\u5019\u8fd9\u4e2a\u7684\u8ba1\u7b97\u6bd4\u4f8b\u81ea\u5df1\u4e5f\u633a\u8ff7\u7cca\u7684\uff0c\u8fd9\u6b21\u518d\u590d\u4e60\u4e00\u4e0b\u3002\u672c\u6b21\u6587\u7ae0\u5206\u4e24\u90e8\u5206\uff1a \u5bb9\u5668\u7684\u5bbd\u5ea6\u5927\u4e8e\u5b50\u5143\u7d20\u5bbd\u5ea6\u4e4b\u548c...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,20,3],"tags":[92,228,229],"class_list":["post-1584","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","category-tech","tag-flex","tag-flex-grow","tag-flex-shrink"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1584"}],"version-history":[{"count":3,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1584\/revisions"}],"predecessor-version":[{"id":1600,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1584\/revisions\/1600"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}