﻿{"id":1214,"date":"2019-09-27T10:21:00","date_gmt":"2019-09-27T02:21:00","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=1214"},"modified":"2022-03-04T12:00:06","modified_gmt":"2022-03-04T04:00:06","slug":"css-flex","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2019\/09\/27\/css-flex\/","title":{"rendered":"CSS Flex \u5340\u584a"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Flex box\u914d\u7f6e\u8a2d\u5b9a<\/h2>\n\n\n\n<p>float\u3001clear\u548cvertical-align\u5c6c\u6027\u5728Flex\u4e0b\u7121\u6548<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"box\">\n  &lt;div>\n  &lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box{\n  display: flex;\n}\n.box{\n  display: inline-flex;\n}\n.box{\n  display: -webkit-flex; \/* Safari *\/\n  display: flex;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Flex\u5c6c\u6027<\/h2>\n\n\n\n<p><strong>Flex\u6bcd\u5143\u7d20\u5c6c\u6027<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>flex-direction<\/strong><\/td><td>box\u6392\u5217\u65b9\u5411<\/td><\/tr><tr><td><strong>flex-wrap<\/strong><\/td><td>box\u5217\u662f\u5426\u63db\u884c<\/td><\/tr><tr><td><strong>flex-flow<\/strong><\/td><td>flex-direction and flex-wrap \u7684\u7c21\u5beb\u5c6c\u6027<br>\u4f8b:flex-flow:&nbsp;row wrap;<\/td><\/tr><tr><td><strong>justify-content<\/strong><\/td><td>box\u4e3b\u8ef8\u5c0d\u9f4a\u65b9\u5f0f<\/td><\/tr><tr><td><strong>align-items<\/strong><\/td><td>box\u5782\u76f4\u5c0d\u9f4a\u65b9\u5f0f<\/td><\/tr><tr><td><strong>align-content<\/strong><\/td><td>box\u8ef8\u7dda\u5c0d\u9f4a\u65b9\u5f0f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Flex\u5b50\u5143\u7d20\u5c6c\u6027<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>order<\/strong><\/td><td>\u6307\u5b9abox\u6392\u5217\u9806\u5e8f<\/td><\/tr><tr><td><strong>flex-grow<\/strong><\/td><td>\u6307\u5b9a\u4e3bbox\u6700\u5927\u6bd4\u4f8b\u7bc4\u570d\u6392\u5217<\/td><\/tr><tr><td><strong>flex-shrink<\/strong><\/td><td>box\u4e0d\u63db\u884c\u96a8\u5167\u5bb9\u5bec\u6392\u5217<\/td><\/tr><tr><td><strong>flex-basis<\/strong><\/td><td>\u6307\u5b9a\u55ae\u4e00\u500bbox\u5bec\u5ea6\u6392\u5217<\/td><\/tr><tr><td><strong>flex<\/strong><\/td><td>flex-grow, flex-shrink, and flex-basis \u7684\u7c21\u5beb\u5c6c\u6027<br>\u4f8b:flex: 0 0 200px;<\/td><\/tr><tr><td><strong>align-self<\/strong><\/td><td>\u6307\u5b9a\u55ae\u4e00\u500bbox\u5c0d\u9f4a\u65b9\u5f0f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u5c6c\u6027\u4ecb\u7d39<\/h2>\n\n\n\n<p><strong>\u6bcd\u5143\u7d20\u5c6c\u6027<\/strong> <strong>flex-direction<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>row<\/strong><\/td><td>\u9810\u8a2d\u503c\uff0c\u6c34\u5e73\u6392\u5217\uff0c\u8d77\u9ede\u5728\u5de6\u65b9\u3002<\/td><\/tr><tr><td><strong>row-reverse<\/strong><\/td><td>\u6c34\u5e73\u6392\u5217\uff0c\u8d77\u9ede\u5728\u53f3\u65b9\u3002<\/td><\/tr><tr><td><strong>column<\/strong><\/td><td>\u5782\u76f4\u6392\u5217\uff0c\u8d77\u9ede\u5728\u4e0a\u65b9\u3002<\/td><\/tr><tr><td><strong>column-reverse<\/strong><\/td><td>\u5782\u76f4\u6392\u5217\uff0c\u8d77\u9ede\u5728\u4e0b\u65b9\u3002<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box {\n  flex-direction: row | row-reverse | column | column-reverse;\n}<\/pre>\n\n\n\n<p><strong>\u6bcd\u5143\u7d20\u5c6c\u6027<\/strong> <strong>flex-wrap<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>nowrap<\/strong><\/td><td>\u4e0d\u63db\u884c<\/td><\/tr><tr><td><strong>wrap<\/strong><\/td><td>\u7b2c\u4e00\u884c\u5728\u4e0a\u65b9<\/td><\/tr><tr><td><strong>wrap-reverse<\/strong><\/td><td>\u7b2c\u4e00\u884c\u5728\u4e0b\u65b9<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box{\n  flex-wrap: nowrap | wrap | wrap-reverse;\n}<\/pre>\n\n\n\n<p><strong>\u6bcd\u5143\u7d20\u5c6c\u6027<\/strong> <strong>flex-flow<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>nowrap<\/strong><\/td><td>\u4e0d\u63db\u884c<\/td><\/tr><tr><td><strong>wrap<\/strong><\/td><td>\u7b2c\u4e00\u884c\u5728\u4e0a\u65b9<\/td><\/tr><tr><td><strong>wrap-reverse<\/strong><\/td><td>\u7b2c\u4e00\u884c\u5728\u4e0b\u65b9<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box{\n  flex-wrap: nowrap | wrap | wrap-reverse;\n}<\/pre>\n\n\n\n<p><strong>\u6bcd\u5143\u7d20\u5c6c\u6027<\/strong> <strong>justify-content<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>flex-start<\/strong><\/td><td>\u9810\u8a2d\u503c\uff0c\u6574\u5217\u9760\u5de6<\/td><\/tr><tr><td><strong>flex-end <\/strong><\/td><td>\u6574\u5217\u9760\u53f3<\/td><\/tr><tr><td><strong>center<\/strong><\/td><td>\u6574\u5217\u5c45\u4e2d<\/td><\/tr><tr><td><strong>space-between<\/strong><\/td><td>\u6574\u5217\u5de6\u53f3\u5c0d\u9f4a\uff0cbox\u9593\u8ddd\u76f8\u7b49<\/td><\/tr><tr><td><strong>space-around<\/strong><\/td><td>\u6574\u5217\u5de6\u53f3\u5c0d\u9f4a\uff0cbox\u542b\u5de6\u53f3\u5167\u8ddd\uff0c\u5167\u8ddd\u76f8\u7b49\uff0c\u9593\u8ddd\u70ba\u5167\u8ddd\u5169\u500d<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box{\n  justify-content: flex-start | flex-end | center | space-between | space-around;\n}<\/pre>\n\n\n\n<p><strong>\u6bcd\u5143\u7d20\u5c6c\u6027<\/strong> <strong>align-items<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>flex-start<\/strong><\/td><td>box\u9760\u4e0a\u5c0d\u9f4a<\/td><\/tr><tr><td><strong>flex-end<\/strong><\/td><td>box\u9760\u4e0b\u5c0d\u9f4a<\/td><\/tr><tr><td><strong>center<\/strong><\/td><td>box\u5782\u76f4\u7f6e\u4e2d\u5c0d\u9f4a<\/td><\/tr><tr><td><strong>baseline<\/strong><\/td><td>box\u5167\u5bb9\u7b2c\u4e00\u884c\u6587\u5b57\u5c0d\u9f4a<\/td><\/tr><tr><td><strong>stretch<\/strong><\/td><td>\u9810\u8a2d\u503c\uff0cbox\u9ad8\u5ea6\u6eff\u7248<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box{\n  align-items: flex-start | flex-end | center | baseline | stretch;\n}<\/pre>\n\n\n\n<p><strong>\u6bcd\u5143\u7d20\u5c6c\u6027<\/strong> <strong>align-content<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>flex-start<\/strong><\/td><td>\u591a\u5217\u9760\u4e0a<\/td><\/tr><tr><td><strong>flex-end<\/strong><\/td><td>\u591a\u5217\u9760\u4e0b<\/td><\/tr><tr><td><strong>center<\/strong><\/td><td>\u591a\u5217\u7f6e\u4e2d<\/td><\/tr><tr><td><strong>space-between<\/strong><\/td><td>\u591a\u5217\u4e0a\u4e0b\u5c0d\u9f4a\u6392\u5217\uff0c\u884c\u8ddd\u76f8\u7b49<\/td><\/tr><tr><td><strong>space-around<\/strong><\/td><td>\u591a\u5217\u7b49\u8ddd\u4e0a\u4e0b\u6392\u5217\uff0c\u542b\u4e0a\u4e0b\u5167\u8ddd\uff0c\uff0c\u5167\u8ddd\u76f8\u7b49\uff0c\u4e0a\u4e0b\u884c\u8ddd\u70ba\u5167\u8ddd\u5169\u500d<\/td><\/tr><tr><td><strong>stretch<\/strong><\/td><td>\u9810\u8a2d\u503c\uff0c\u591a\u5217\u7b49\u8ddd\u4e0a\u4e0b\u6392\u5217<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box{\n  align-content: flex-start | flex-end | center | space-between | space-around | stretch;\n}<\/pre>\n\n\n\n<p><strong>\u5b50\u5143\u7d20\u5c6c\u6027<\/strong> <strong>order<\/strong><\/p>\n\n\n\n<p>\u5b9a\u7fa9\u6392\u5217\u9806\u5e8f\u5c0f\u5230\u5927\uff0c\u6578\u503c\u8d8a\u5c0f\uff0c\u6392\u5217\u8d8a\u524d\u9762\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box div{\n   order: &lt;integer>; \/* default 0 *\/\n}\n.box div{\n   order: 0;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/\u4f8b\n&lt;div class=\"box\">\n  &lt;div style=\"order: 3\">1&lt;\/div>\n  &lt;div style=\"order: 2\">2&lt;\/div>\n  &lt;div style=\"order: 4\">3&lt;\/div>\n  &lt;div style=\"order: 1\">4&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p><strong>\u5b50\u5143\u7d20\u5c6c\u6027 flex-grow<\/strong><\/p>\n\n\n\n<p>\u4f9d\u7167\u6578\u503c\u6bd4\u4f8b\u6392\u5217\uff0c1\u70ba\u540c\u6bd4\u4f8b\u6392\u5217\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box div{\n   flex-grow: &lt;number>; \/* default 0 *\/\n}\n.box div{\n   flex-grow: 1;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/\u4f8b\n&lt;div class=\"box\">\n  &lt;div style=\"flex-grow: 1\">1&lt;\/div>\n  &lt;div style=\"flex-grow: 1\">2&lt;\/div>\n  &lt;div style=\"flex-grow: 8\">3&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p><strong>\u5b50\u5143\u7d20\u5c6c\u6027 flex-shrink<\/strong><\/p>\n\n\n\n<p>flex-shrink\u6578\u503c\u70ba1\uff0c\u6240\u6709\u5143\u7d20\u7b49\u6bd4\u4f8b\u3002\u5176\u4e2d\u4e00\u500b\u5143\u7d20flex-shrink\u70ba0\uff0c\u8a72\u5143\u7d20\u4f9d\u7167\u5167\u5bb9\u6bd4\u4f8b\u6392\u5217\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box div{\n   flex-shrink: &lt;number>; \/* default 1 *\/\n}\n.box div{\n   flex-shrink: 0;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/\u4f8b\n&lt;div class=\"box\">\n  &lt;div>1&lt;\/div>\n  &lt;div>2&lt;\/div>\n  &lt;div style=\"flex-shrink: 0\">3&lt;\/div>\n  &lt;div>4&lt;\/div>\n  &lt;div>5&lt;\/div>\n  &lt;div>6&lt;\/div>\n  &lt;div>7&lt;\/div>\n  &lt;div>8&lt;\/div>\n  &lt;div>9&lt;\/div>\n  &lt;div>10&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p><strong>\u5b50\u5143\u7d20\u5c6c\u6027 flex-basis<\/strong><\/p>\n\n\n\n<p>\u5f37\u5236\u70ba\u5143\u7d20\u8a2d\u5bec\u9ad8\uff0c\u5982\u672a\u8a2d\u5b9a\u5247\u7b49\u6bd4\u4f8b\u6392\u5217\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box div{\n   flex-basis: &lt;length> | auto; \/* default auto *\/\n}\n.box div{\n   flex-basis: 200px;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/\u4f8b\n&lt;div class=\"box\">\n  &lt;div>1&lt;\/div>\n  &lt;div>2&lt;\/div>\n  &lt;div style=\"flex-basis: 200px\">3&lt;\/div>\n  &lt;div>4&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p><strong>\u5b50\u5143\u7d20\u5c6c\u6027 flex<\/strong><\/p>\n\n\n\n<p>flex-grow\uff0cflex-shrink\u548cflex-basis\u7684\u7c21\u5beb\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box div{\n   flex: none | [ &lt;'flex-grow'> &lt;'flex-shrink'> | &lt;'flex-basis'> ]\n}\/* default 0 1 auto *\/\n\n.box div{\n   flex: flex: 0 0 200px;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/\u4f8b\n&lt;div class=\"box\">\n  &lt;div>1&lt;\/div>\n  &lt;div>2&lt;\/div>\n  &lt;div style=\"flex: 0 0 200px\">3&lt;\/div>\n  &lt;div>4&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p><strong>\u5b50\u5143\u7d20\u5c6c\u6027 align-self<\/strong><\/p>\n\n\n\n<p>\u5c0d\u55ae\u4e00\u5143\u7d20\u8a2d\u5b9a\u5c6c\u6027\uff0c\u7e7c\u627falign-items\u5c6c\u6027\uff0c\u8986\u84cbalign-items\u5c6c\u6027\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box div{\n   align-self: auto | flex-start | flex-end | center | baseline | stretch;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/\u4f8b\n&lt;div class=\"flex-container\">\n  &lt;div>1&lt;\/div>\n  &lt;div>2&lt;\/div>\n  &lt;div style=\"align-self: center\">3&lt;\/div>\n  &lt;div>4&lt;\/div>\n&lt;\/div>\n\n\/\/\u4f8b\n&lt;div class=\"box\">\n  &lt;div>1&lt;\/div>\n  &lt;div style=\"align-self: flex-start\">2&lt;\/div>\n  &lt;div style=\"align-self: flex-end\">3&lt;\/div>\n  &lt;div>4&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Flex \u7bc4\u4f8b<\/h2>\n\n\n\n<p><strong>Flex box\u57fa\u672c\u914d\u7f6e<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/\u4f8b\n&lt;div class=\"container\">\n  &lt;nav>logo&lt;\/nav>\n  &lt;div class=\"flex-column\">flex-column&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.container {\n  display: -webkit-flex;\n  display: flex;\n}\nnav {\n  width: 200px;\n}\n.flex-column {\n  -webkit-flex: 1;\n          flex: 1;\n}<\/pre>\n\n\n\n<p><strong>Flex \u7db2\u9801\u914d\u7f6e<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/\u4f8b\n&lt;!-- Note -->\n&lt;div style=\"background:yellow;padding:5px\">\n  &lt;h4 style=\"text-align:center\">Resize the browser window to see the responsive effect.&lt;\/h4>\n&lt;\/div>\n\n&lt;!-- Header -->\n&lt;div class=\"header\">\n  &lt;h1>My Website&lt;\/h1>\n  &lt;p>With a &lt;b>flexible&lt;\/b> layout.&lt;\/p>\n&lt;\/div>\n\n&lt;!-- Navigation Bar -->\n&lt;div class=\"navbar\">\n  &lt;a href=\"#\">Link&lt;\/a>\n  &lt;a href=\"#\">Link&lt;\/a>\n  &lt;a href=\"#\">Link&lt;\/a>\n  &lt;a href=\"#\">Link&lt;\/a>\n&lt;\/div>\n\n&lt;!-- The flexible grid (content) -->\n&lt;div class=\"row\">\n  &lt;div class=\"side\">\n    &lt;h2>About Me&lt;\/h2>\n    &lt;h5>Photo of me:&lt;\/h5>\n    &lt;div class=\"fakeimg\" style=\"height:200px;\">Image&lt;\/div>\n    &lt;p>Some text about me in culpa qui officia deserunt mollit anim..&lt;\/p>\n    &lt;h3>More Text&lt;\/h3>\n    &lt;p>Lorem ipsum dolor sit ame.&lt;\/p>\n    &lt;div class=\"fakeimg\" style=\"height:60px;\">Image&lt;\/div>&lt;br>\n    &lt;div class=\"fakeimg\" style=\"height:60px;\">Image&lt;\/div>&lt;br>\n    &lt;div class=\"fakeimg\" style=\"height:60px;\">Image&lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"main\">\n    &lt;h2>TITLE HEADING&lt;\/h2>\n    &lt;h5>Title description, Dec 7, 2017&lt;\/h5>\n    &lt;div class=\"fakeimg\" style=\"height:200px;\">Image&lt;\/div>\n    &lt;p>Some text..&lt;\/p>\n    &lt;p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.&lt;\/p>\n    &lt;br>\n    &lt;h2>TITLE HEADING&lt;\/h2>\n    &lt;h5>Title description, Sep 2, 2017&lt;\/h5>\n    &lt;div class=\"fakeimg\" style=\"height:200px;\">Image&lt;\/div>\n    &lt;p>Some text..&lt;\/p>\n    &lt;p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.&lt;\/p>\n  &lt;\/div>\n&lt;\/div>\n\n&lt;!-- Footer -->\n&lt;div class=\"footer\">\n  &lt;h2>Footer&lt;\/h2>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n  box-sizing: border-box;\n}\n\n\/* Style the body *\/\nbody {\n  font-family: Arial;\n  margin: 0;\n}\n\n\/* Header\/logo Title *\/\n.header {\n  padding: 60px;\n  text-align: center;\n  background: #1abc9c;\n  color: white;\n}\n\n\/* Style the top navigation bar *\/\n.navbar {\n  display: flex;\n  background-color: #333;\n}\n\n\/* Style the navigation bar links *\/\n.navbar a {\n  color: white;\n  padding: 14px 20px;\n  text-decoration: none;\n  text-align: center;\n}\n\n\/* Change color on hover *\/\n.navbar a:hover {\n  background-color: #ddd;\n  color: black;\n}\n\n\/* Column container *\/\n.row {  \n  display: flex;\n  flex-wrap: wrap;\n}\n\n\/* Create two unequal columns that sits next to each other *\/\n\/* Sidebar\/left column *\/\n.side {\n  flex: 30%;\n  background-color: #f1f1f1;\n  padding: 20px;\n}\n\n\/* Main column *\/\n.main {\n  flex: 70%;\n  background-color: white;\n  padding: 20px;\n}\n\n\/* Fake image, just for this example *\/\n.fakeimg {\n  background-color: #aaa;\n  width: 100%;\n  padding: 20px;\n}\n\n\/* Footer *\/\n.footer {\n  padding: 20px;\n  text-align: center;\n  background: #ddd;\n}\n\n\/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other *\/\n@media screen and (max-width: 700px) {\n  .row, .navbar {   \n    flex-direction: column;\n  }\n}<\/pre>\n\n\n\n<p><strong>Flexbox \u7f6e\u4e2d\u914d\u7f6e<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/\u4f8b\n&lt;div class=\"flex-container\">\n  &lt;div>\u7f6e\u4e2d\u914d\u7f6e&lt;\/div>\n&lt;div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.flex-container {\n  height: 300px;\n  display: -webkit-flex;\n  display:         flex;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}<\/pre>\n\n\n\n<p><strong>Flex \u7011\u5e03\u5f0f\u5716\u7247\u6392\u5217<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/\u4f8b\n&lt;!-- Header -->\n&lt;div class=\"header\">\n  &lt;h1>Responsive Image Grid&lt;\/h1>\n  &lt;p>Resize the browser window to see the responsive effect.&lt;\/p>\n&lt;\/div>\n\n&lt;!-- Photo Grid -->\n&lt;div class=\"row\"> \n  &lt;div class=\"column\">\n    &lt;img src=\"\/w3images\/wedding.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/rocks.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/falls2.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/paris.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/nature.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/mist.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/paris.jpg\" style=\"width:100%\">\n  &lt;\/div>\n  \n  &lt;div class=\"column\">\n    &lt;img src=\"\/w3images\/underwater.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/ocean.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/wedding.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/mountainskies.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/rocks.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/underwater.jpg\" style=\"width:100%\">\n  &lt;\/div> \n   \n  &lt;div class=\"column\">\n    &lt;img src=\"\/w3images\/wedding.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/rocks.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/falls2.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/paris.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/nature.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/mist.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/paris.jpg\" style=\"width:100%\">\n  &lt;\/div>\n  \n  &lt;div class=\"column\">\n    &lt;img src=\"\/w3images\/underwater.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/ocean.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/wedding.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/mountainskies.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/rocks.jpg\" style=\"width:100%\">\n    &lt;img src=\"\/w3images\/underwater.jpg\" style=\"width:100%\">\n  &lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  font-family: Arial;\n}\n\n.header {\n  text-align: center;\n  padding: 32px;\n}\n\n.row {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 4px;\n}\n\n\/* Create four equal columns that sits next to each other *\/\n.column {\n  flex: 25%;\n  max-width: 25%;\n  padding: 0 4px;\n}\n\n.column img {\n  margin-top: 8px;\n  vertical-align: middle;\n}\n\n\/* Responsive layout - makes a two column-layout instead of four columns *\/\n@media (max-width: 800px) {\n  .column {\n    flex: 50%;\n    max-width: 50%;\n  }\n}\n\n\/* Responsive layout - makes the two columns stack on top of each other instead of next to each other *\/\n@media (max-width: 600px) {\n  .column {\n    flex: 100%;\n    max-width: 100%;\n  }\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Flex box\u914d\u7f6e\u8a2d\u5b9a float\u3001clear\u548cvertical-align\u5c6c\u6027\u5728Flex\u4e0b\u7121\u6548 Flex\u5c6c&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12,4],"tags":[],"class_list":["post-1214","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=1214"}],"version-history":[{"count":101,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1214\/revisions"}],"predecessor-version":[{"id":5855,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1214\/revisions\/5855"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1214"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}