{"id":137,"date":"2018-10-10T01:52:06","date_gmt":"2018-10-09T17:52:06","guid":{"rendered":"https:\/\/wp.winter-weng.cc\/work\/?p=137"},"modified":"2018-10-10T01:52:06","modified_gmt":"2018-10-09T17:52:06","slug":"css-flexbox","status":"publish","type":"post","link":"https:\/\/wp.winter-weng.cc\/work\/?p=137","title":{"rendered":"[CSS] Flexbox"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u986f\u793a\/\u96b1\u85cf\u5167\u5bb9\u76ee\u9304\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#Flex_%E6%A6%82%E5%BF%B5\" >Flex \u6982\u5ff5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#Flex_%E5%B1%AC%E6%80%A7\" >Flex \u5c6c\u6027<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#display\" >display<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#flex-direction\" >flex-direction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#flex-wrap\" >flex-wrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#flex-flow\" >flex-flow<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#justify-content\" >justify-content<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#align-items\" >align-items<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#align-content\" >align-content<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#flex\" >flex<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#align-self\" >align-self<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=137\/#Order\" >Order<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Flex_%E6%A6%82%E5%BF%B5\"><\/span>Flex \u6982\u5ff5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n<p>\u4f9d\u64da\u00a0<a href=\"http:\/\/www.w3.org\/TR\/css3-flexbox\/#box-model\" target=\"_blank\" rel=\"noreferrer noopener\">W3C<\/a> \u63cf\u8ff0\uff0cflex \u6982\u5ff5\u5982\u4e0b\u5716\u6240\u793a\uff0c\u8207 block \u6216 inline-block \u4e0d\u540c\uff0cflexbox \u4f9d\u64da\u65b9\u5411\u548c\u5c3a\u5bf8\u4f86\u4f48\u5c40\u3002<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/rukiawinter-wordpress.s3.ap-northeast-1.amazonaws.com\/wp-content\/uploads\/sites\/2\/2018\/10\/20181010_flexbox.png\" alt=\"\" class=\"wp-image-139\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Flex_%E5%B1%AC%E6%80%A7\"><\/span>Flex \u5c6c\u6027<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n<p>\u5c0d\u65bc\u521d\u5b78\u8005\u4f86\u8aaa\u5bb9\u6613\u641e\u6df7\uff0c\u4f46\u5148\u5c07\u5c6c\u6027\u4ee5\u5167\u5916\u5143\u4ef6\u5340\u5206\uff0c\u53ef\u4fbf\u65bc\u8a18\u61b6\u8207\u5b78\u7fd2\u3002<\/p>\n\n\n<p>Flex \u5916\u5bb9\u5668 (container) \u5c6c\u6027\uff1a<\/p>\n\n\n<ul class=\"wp-block-list\"><li>display<\/li><li>flex-flow<ul><li>flex-direction<\/li><li>flex-wrap<\/li><\/ul><\/li><li>justify-content<\/li><li>align-items<\/li><li>align-content<\/li><\/ul>\n\n\n<p>Flex \u5167\u5143\u4ef6 (items) \u5c6c\u6027\uff1a<\/p>\n\n\n<ul class=\"wp-block-list\"><li>flex<ul><li>flex-grow<\/li><li>flex-shrink<\/li><li>flex-basis<\/li><\/ul><\/li><li>order<\/li><li>align-self<\/li><\/ul>\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"display\"><\/span>display<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<pre class=\"wp-block-code\"><code>display: flex | inline-flex;<\/code><\/pre>\n\n\n<p>inline-flex \u985e\u4f3c inline-block + flex\uff0c\u5f8c\u65b9\u5143\u7d20\u4e0d\u63db\u884c\u3002<\/p>\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"flex-direction\"><\/span>flex-direction<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u6c7a\u5b9a\u5143\u7d20\u6392\u5217\u7684\u65b9\u5411\u3002<\/p>\n\n\n<pre class=\"wp-block-code\"><code>flex-direction: row | row-reverse | column | column-reverse;<\/code><\/pre>\n\n\n<ul class=\"wp-block-list\"><li>row\uff1a\u6c34\u5e73\u6392\u5217<\/li><li>column\uff1a\u5782\u76f4\u6392\u5217<\/li><\/ul>\n\n\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"ddaJVr\" data-default-tab=\"css,result\" data-user=\"yichinweng\" data-pen-title=\"[flex] flex-direction\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/yichinweng\/pen\/ddaJVr\/\">[flex] flex-direction<\/a> by Winter (<a href=\"https:\/\/codepen.io\/yichinweng\">@yichinweng<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"flex-wrap\"><\/span>flex-wrap<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u6c7a\u5b9a\u5143\u7d20\u8d85\u51fa\u7bc4\u570d\u6642\u662f\u5426\u8981\u63db\u884c\u3002<\/p>\n\n\n<pre class=\"wp-block-code\"><code>flex-wrap: nowrap | wrap | wrap-reverse;<\/code><\/pre>\n\n\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"QZpbBZ\" data-default-tab=\"css,result\" data-user=\"yichinweng\" data-pen-title=\"[flex] flex-wrap\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/yichinweng\/pen\/QZpbBZ\/\">[flex] flex-wrap<\/a> by Winter (<a href=\"https:\/\/codepen.io\/yichinweng\">@yichinweng<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"flex-flow\"><\/span>flex-flow<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<pre class=\"wp-block-code\"><code>flex-flow: flex-direction flex-wrap;<\/code><\/pre>\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"justify-content\"><\/span>justify-content<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u4e3b\u8ef8\u7684\u6392\u5217\u65b9\u5f0f\u3002<\/p>\n\n\n<pre class=\"wp-block-code\"><code>justify-content: flex-start | flex-end | center | space-between | space-around;<\/code><\/pre>\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"align-items\"><\/span>align-items <span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u4ea4\u932f\u8ef8\u7684\u5c0d\u9f4a\u65b9\u5f0f\u3002<\/p>\n\n\n<pre class=\"wp-block-code\"><code>align-items: flex-start | flex-end | center | baseline | stretch;<\/code><\/pre>\n\n\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"aRJvzZ\" data-default-tab=\"css,result\" data-user=\"yichinweng\" data-pen-title=\"[flex] justify-content\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/yichinweng\/pen\/aRJvzZ\/\">[flex] justify-content<\/a> by Winter (<a href=\"https:\/\/codepen.io\/yichinweng\">@yichinweng<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"align-content\"><\/span>align-content<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>align-items \u7684\u591a\u884c\u7248\u672c\u3002<\/p>\n\n\n<pre class=\"wp-block-code\"><code>align-content: flex-start | flex-end | center | space-between | space-around | stretch;<\/code><\/pre>\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"flex\"><\/span>flex<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>flex \u5305\u542b\u4ee5\u4e0b\u4e09\u7a2e\u5c6c\u6027\uff0c\u82e5\u53ea\u5beb\u4e00\u500b\u6578\u503c\uff0c\u5247\u4ee3\u8868 flex-grow\u3002<\/p>\n\n\n<ul class=\"wp-block-list\"><li>flex-grow\uff1a\u5916\u5bb9\u5668\u7a7a\u9593\u6709\u5269\u9918\u6642\uff0c\u4ee5\u591a\u5c11\u6b0a\u91cd\u5206\u914d\u5269\u9918\u7a7a\u9593\u3002\u9810\u8a2d\u503c\u70ba 0\u3002<\/li><li>flex-shrink\uff1a\u7a7a\u9593\u4e0d\u5920\u6642\uff0c\u4ee5\u591a\u5c11\u6b0a\u91cd\u6536\u7e2e\u5143\u4ef6\u7684\u7a7a\u9593\u3002\u9810\u8a2d\u503c\u70ba 1\u3002<\/li><li>flex-basis\uff1a\u5143\u4ef6\u57fa\u6e96\u503c\u3002<\/li><\/ul>\n\n\n<p>\u203b\u5ef6\u4f38\u95b1\u8b80\uff1a<a href=\"https:\/\/github.com\/xieranmaya\/blog\/issues\/9\" target=\"_blank\" rel=\"noopener\">\u8a73\u89e3 flex-grow \u8207 flex-shrink<\/a><\/p>\n\n\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"VEpeWN\" data-default-tab=\"css,result\" data-user=\"yichinweng\" data-pen-title=\"[flex] flex\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/yichinweng\/pen\/VEpeWN\/\">[flex] flex<\/a> by Winter (<a href=\"https:\/\/codepen.io\/yichinweng\">@yichinweng<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"align-self\"><\/span>align-self<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u8abf\u6574\u500b\u5225\u5143\u4ef6\u7684\u4ea4\u932f\u8ef8\u8a2d\u5b9a\uff0c\u6b64\u8a2d\u5b9a\u6703\u8986\u84cb align-items \u7684\u8a2d\u5b9a\u3002<\/p>\n\n\n<pre class=\"wp-block-code\"><code>align-self: stretch | center | flex-start | flex-end | baseline;<\/code><\/pre>\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Order\"><\/span>Order<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u53ef\u4ee5\u5b9a\u7fa9\u5143\u4ef6\u7684\u9806\u5e8f\uff0c\u4f9d\u64da\u6578\u5b57\u5927\u5c0f\u4f9d\u5e8f\u6392\u5217\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flex \u6982\u5ff5 \u4f9d\u64da\u00a0W3C \u63cf\u8ff0\uff0cflex \u6982\u5ff5&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[3],"tags":[16,19,24],"class_list":["post-137","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-flexbox","tag-rwd"],"_links":{"self":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=137"}],"version-history":[{"count":0,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/137\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}