{"rsdb":{"rid":"239283","subhead":"","postdate":"0","aid":"164928","fid":"107","uid":"1","topic":"1","content":"
\n

\u3000\u3000\u5e03\u5c40\u7684\u4f20\u7edf\u65b9\u6848\uff0c\u57fa\u4e8e\u76d2\u88c5\u6a21\u578b\uff0c\u4f9d\u8d56display\u5c5e\u6027+position\u5c5e\u6027+float\u5c5e\u6027\u3002\u4ed6\u5bf9\u4e8e\u90a3\u4e9b\u7279\u6b8a\u7684\u5e03\u5c40\u975e\u5e38\u4e0d\u65b9\u4fbf\uff0c\u6bd4\u5982\uff0c\u5782\u76f4\u5c45\u4e2d\u5c31\u4e0d\u5bb9\u6613\u5b9e\u73b0\u3002
\u3000\u30002009\u5e74\uff0cW3C\u63d0\u51fa\u4e86\u4e00\u79cd\u65b0\u7684\u65b9\u6848\u2014-Flex\u5e03\u5c40\uff0c\u53ef\u4ee5\u7b80\u4fbf\u3001\u5b8c\u6574\u3001\u54cd\u5e94\u5f0f\u5730\u5b9e\u73b0\u5404\u79cd\u9875\u9762\u5e03\u5c40\u3002\u76ee\u524d\uff0c\u5b83\u5df2\u7ecf\u5f97\u5230\u4e86\u6240\u6709\u6d4f\u89c8\u5668\u7684\u652f\u6301\uff0c\u8fd9\u610f\u5473\u7740\uff0c\u73b0\u5728\u5c31\u80fd\u5f88\u5b89\u5168\u5730\u4f7f\u7528\u8fd9\u9879\u529f\u80fd\u3002
\u3000\u3000\u91c7\u7528Flex\u5e03\u5c40\u7684\u5143\u7d20\uff0c\u79f0\u4e3aFlex\u5bb9\u5668\uff08flex container\uff09\uff0c\u7b80\u79f0\u201d\u5bb9\u5668\u201d\u3002\u5b83\u7684\u6240\u6709\u5b50\u5143\u7d20\u81ea\u52a8\u6210\u4e3a\u5bb9\u5668\u6210\u5458\uff0c\u79f0\u4e3aFlex\u9879\u76ee\uff08flex item\uff09\uff0c\u7b80\u79f0\u201d\u9879\u76ee\u201d\u3002
\u3000\u3000\u4eca\u5929\u6211\u6765\u5206\u4eab\u4e00\u4e0b\u6211\u5bf9\u5f39\u6027\u76d2\u6a21\u578b\u7684\u89c1\u89e3\u548c\u7ecf\u9a8c\uff0c\u5982\u6709\u4e0d\u8db3\u4e4b\u5904\u6b22\u8fce\u7559\u8a00\u6307\u6b63\u3002
\u3000\u3000\u5728\u7f51\u4e0a\u770b\u8fc7\u8fd9\u4e00\u4e9b\u5173\u4e8e\u5f39\u6027\u76d2\u5b50\u6a21\u578b\u7684\u77e5\u8bc6\uff0c\u6211\u76f8\u4fe1\u767e\u5ea6\u8fc7\u8fd9\u65b9\u9762\u77e5\u8bc6\u70b9\u7684\u4eba\u90fd\u89c1\u8fc7\u4e0b\u9762\u7684\u8fd9\u4e00\u5e45\u56fe\u7247\uff0c\u7b2c\u4e00\u6b21\u770b\u5c31\u4e00\u8138\u61f5\u903c\uff0c\u5982\u679c\u5148\u4e86\u89e3\u5b9e\u9a8c\u4e4b\u540e\u518d\u6765\u770b\u4e0b\u9762\u8fd9\u4e00\u5e45\u56fe\u5c31\u6e05\u695a\u4e86\uff0c\u4eca\u5929\u6211\u5c31\u626f\u5f00\u4e3b\u8f74\uff0c\u4ea4\u53c9\u8f74\u5565\u8fd9\u4e9b\u7684\u4e0d\u8c08\uff0c\u540e\u9762\u5199\u4e86\u4e00\u4e9b\u53d1\u73b0\u8fd8\u662f\u8981\u770b\u4e00\u4e0b\u4e3b\u8f74\u548c\u4ea4\u53c9\u8f74\uff0c\uff0c\uff0c\uff0c \u7b80\u5355\u7684\u6765\u53ef\u4ee5\u5148\u8ba4\u4e3a\u4e3b\u8f74\u5c31\u662f\u6a2a\u8f74\uff0c\u4ea4\u53c9\u8f74\u5c31\u662f\u7ad6\u7740\u7684\u7eb5\u8f74\uff0c\u4e0b\u9762\u770b\u5c31\u76f4\u63a5\u6765\u4ee3\u7801\u548c\u6548\u679c\uff0c\u5e0c\u671b\u4f60\u770b\u5230\u8fc7\u540e\u8fdb\u884c\u5b9e\u9a8c\uff0c\u6211\u76f8\u4fe1\u4f60\u4f1a\u5bf9\u5f39\u6027\u76d2\u5b50\u7684\u77e5\u8bc6\u4f1a\u6709\u5f88\u5927\u7684\u4e86\u89e3\u5e76\u4e14\u80fd\u591f\u5e94\u7528\u5f39\u6027\u76d2\u5b50\u6765\u8fdb\u884c\u5e03\u5c40\u3002<\/p> \n

\u3000\u3000\"\"<\/p> \n

 <\/p> \n


\u4e00\u3001\u521d\u59cb\u7684\u4ee3\u7801\u548c\u6837\u5f0f\u5982\u4e0b\uff0c\u63a5\u4e0b\u6765\u6211\u4eec\u6dfb\u52a0\u4ee3\u7801\u548c\u4fee\u6539\u4ee3\u7801\u6765\u67e5\u770b\u6837\u5f0f\u7684\u533a\u522b\u3002<\/p> \n

        \"\"<\/p> \n

  \"\"<\/p> \n

    \"\"<\/p> \n


\u3000\u3000\u5f39\u6027\u76d2\u5b50\u561b\uff0c\u9996\u8981\u7684\u6761\u4ef6\u8fd8\u662f\u8981\u8bf4\u4e00\u4e0b\u5bb9\u5668\u548c\u9879\u76ee\uff0c\u5bf9\u4e8e\u6211\u4eec\u8fd9\u4e2a\u800c\u8a00\u5bb9\u5668\u5c31\u662f\u4ee3\u7801\u4e2d\u7684 ul \uff0c \u9879\u76ee\u4e3a li\u3002\u597d\u4e86\u63a5\u4e0b\u6765\u5f00\u59cb\u6dfb\u52a0\u4ee3\u7801\u770b\u770b\u795e\u5947\u7684\u6837\u5f0f\u3002
\u3000\u3000\u5bf9\u4e8e\u5f39\u6027\u76d2\u5b50\u800c\u8a00\u9996\u8981\u6761\u4ef6\u5c31\u662f\u7ed9\u5bb9\u5668\u6dfb\u52a0\u4e0a display:flex;  <\/p> \n

\u3000\u3000\u4e0b\u9762\u7684\u8fd9\u4e9b\u5c5e\u6027\u90fd\u662f\u5bb9\u5668\u5c5e\u6027\uff0c\u90fd\u6dfb\u52a0\u5230ul\u4e0a\u9762\u3002<\/p> \n

\u4e00\u3001 flex-direction: \u51b3\u5b9a\u4e3b\u8f74\u65b9\u5411\u3002
\u3000\u30001. flex-direction:row;\uff08\u4e3b\u8f74\u65b9\u5411\uff1a\u6a2a\u6392\/\u884c \u4ece\u5de6\u5230\u53f3\u6392\u5217\uff09
\u3000\u3000\u3000\u5c06\u8fd9\u4e2a\u5c5e\u6027\u6dfb\u52a0\u5230\u5bb9\u5668ul\u5f53\u4e2d\uff0c\u4f1a\u53d1\u73b0\u6837\u5f0f\u5982\u4e0b\uff0c\u5c45\u7136\u53ef\u4ee5\u6a2a\u6392\u663e\u793a\u3002<\/p> \n

\u3000\u3000\"\"<\/p> \n

\u3000\u3000\u3000\u8bf4\u5230\u5f39\u6027\u6211\u4eec\u6765\u8bd5\u9a8c\u4e00\u4e0b\u8fd9\u4e2a\u6548\u679c\uff0c\u5c06\u5916\u9762\u7684\u5bb9\u5668\u7684\u5bbd\u5ea6\u51cf\u5c0f\u4e00\u4e9b<\/p> \n

\u3000\u3000\"\"<\/p> \n

\u3000\u3000\u3000\u6211\u4eec\u5148\u51cf\u5c0f\u5230\u8fd9\u6837\uff0c\u5982\u679c\u5bbd\u5ea6\u7ee7\u7eed\u5c0f\u7684\u8bdd\uff0c\u4f1a\u53d1\u73b0\u4ed6\u4f1a\u4e0d\u4e00\u6837\uff0c\u5c31\u7b97\u628a\u5bbd\u5ea6\u7f29\u5c0f\u4e4b\u540e\u4ed6\u4e5f\u4e0d\u4f1a\u6362\u884c\uff0c\u5e76\u4e14\u5728\u7f29\u5c0f\u4e4b\u540e\u4ed6\u7684\u5bbd\u5ea6\u4f1a\u7ef4\u6301\u5728\u5b83\u91cc\u9762\u5185\u5bb9\u7684\u5bbd\u5ea6\u3002<\/p> \n

\"\"<\/p> \n

\u3000\u30002.flex-direction:row-reverse;\uff08\u4e3b\u8f74 \u4ece\u53f3\u5230\u5de6\u6392\u5217\uff09<\/p> \n

\u3000\u3000\u3000\u3000<\/p> \n

\u3000\u3000\u3000\u3000\"\"<\/p> \n

 <\/p> \n

3.flex-direction:column;\uff08\u4e3b\u8f74\u4e3a\u5782\u76f4\u65b9\u5411 \u4ece\u4e0a\u5230\u4e0b\u6392\u5217\uff09<\/p> \n

\u3000\u3000\u3000\u3000\"\"<\/p> \n

 <\/p> \n

4.flex-direction:column-reverse;(\u4e3b\u8f74\u4e3a\u5782\u76f4\u65b9\u5411 \u4ece\u4e0b\u5f80\u4e0a\u6392\u5217)<\/p> \n

\u3000\u3000\u3000\u3000\"\"<\/p> \n

 <\/p> \n

\u4e8c\u3001flex-wrap: \u8be5\u5c5e\u6027\u63a7\u5236flex\u662f\u5355\u884c\u8fd8\u662f\u591a\u884c(\u6ce8\u610f\uff1a\u8fd9\u91cc\u7684\u6211\u628a\u5bbd\u5ea6\u90fd\u7ed9\u8c03\u6574\u5c0f\u4e86\uff0c\u6539\u4e3a\u4e86300px)
\u3000\u30001.flex-wrap:nowrap;(\u9ed8\u8ba4\u503c\uff0c\u4e0d\u6362\u884c)
\u3000\u3000\u3000\u3000\u3000\u3000\u5c31\u50cf\u6700\u5f00\u59cb\u6211\u4eec\u5b9e\u9a8c\u7684\u90a3\u6837\uff0c\u5c31\u7b97\u628a\u4ed6\u7684\u5bbd\u5ea6\u8bbe\u7f6e\u6210\u90a3\u4e48\u5c0f\u4ed6\u90fd\u4e0d\u4f1a\u6362\u884c
\u3000\u30002.flex-wrap:wrap; \uff08\u6362\u884c\uff09\u5982\u4e0b\u56fe<\/p> \n

\u3000\u3000\"\"<\/p> \n

 <\/p> \n

\u3000\u30003.flex-wrap:wrap-reverse; (\u53cd\u8f6c\uff0c\u901a\u4fd7\u7684\u8bf4\u5c31\u662f\u628a\u7b2c\u4e00\u884c\u548c\u6700\u540e\u4e00\u884c\u6362\u4f4d\u7f6e\uff0c\u7b2c\u4e8c\u884c\u548c\u5012\u6570\u7b2c\u4e8c\u884c\u6362\u4f4d\u7f6e\uff0c\u4f9d\u6b21\u7c7b\u63a8)<\/p> \n

\u3000\u3000\"\"<\/p> \n

\u4e09\u3001flex-flow;\u3000\u3000flex-direction\u548cflex-wrap\u7684\u590d\u5408\u7b80\u5199\u5f62\u5f0f\uff0c\u9ed8\u8ba4\u4e3a row nowrap;<\/p> \n

\u3000\u30001. flex-flow:row-reverse wrap;(\u4ece\u53f3\u5411\u5de6\u6392\u5217\uff0c\u6362\u884c)<\/p> \n

\u3000\u3000\"\"<\/p> \n

\u3000\u3000\u5c31\u5199\u4e00\u79cd\u7ec4\u5408\u5c5e\u6027\u5427\u5176\u4ed6\u7684\u6837\u5f0f\u81ea\u5df1\u53bb\u8bd5\u4e00\u8bd5\u3002
\u56db\u3001justify-content \u5b9a\u4e49\u4e86\u9879\u76ee\u5728\u4e3b\u8f74\u4e0a\u7684\u6392\u5217\u65b9\u5f0f
\u3000\u3000\u6ce8\u610f\uff1a\u4e0b\u9762\u7684\u5b9e\u9a8c\u6211\u52a0\u4e0a\u4e86flex-wrap:wrap; \u6362\u884c\u5c5e\u6027\uff08\u5bb9\u6613\u8fa8\u522b\uff09
\u3000\u30001.justify-content:flex-start; \uff08\u5de6\u5bf9\u9f50\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

 <\/p> \n

\u3000\u30002.justify-content:flex-end;\uff08\u53f3\u5bf9\u9f50\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

 <\/p> \n

\u3000\u30003.justify-content:center;\uff08\u5c45\u4e2d\u5bf9\u9f50\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

 <\/p> \n

\u3000\u30004.justify-content:space-between;\uff08\u4e24\u7aef\u5bf9\u9f50\uff0c\u9879\u76ee\u4e4b\u95f4\u95f4\u9694\u76f8\u7b49\uff09<\/p> \n

\u3000\u3000\u8fd9\u91cc\u6211\u628a\u5bbd\u5ea6\u53d8\u5c0f\u4e86\u4e00\u4e9b\uff0c\u770b\u5230\u4e0b\u9762\u8fd9\u5e45\u56fe\u662f\u4e0d\u662f\u611f\u89c9\u53ea\u7528\u8fd9\u4e2a\u5c5e\u6027\u5c31\u53ef\u4ee5\u5f88\u5bb9\u6613\u7684\u5b9e\u73b0\u5e03\u5c40\u4e86\u5462\u3002<\/p> \n

\u3000\u3000\"\"<\/p> \n

 <\/p> \n

\u3000\u30005 .justify-content:space-around;\uff08\u6bcf\u4e2a\u9879\u76ee\u4e24\u4fa7\u95f4\u9694\u76f8\u7b49\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

 <\/p> \n

\u4e94\u3001align-item \u89c4\u5b9a\u4e86\u5f39\u6027\u76d2\u5b50\u5728\u4ea4\u53c9\u8f74\u5982\u4f55\u5bf9\u9f50
\u3000\u3000\u8fd9\u4e00\u6b21\u628a\u7b2c\u4e00\u4e2a\u548c\u7b2c\u4e8c\u4e2a\u9ad8\u5ea6\u8c03\u6574\u5927\u4e00\u4e9b\u662f\u8fd9\u4e2a\u6837\u5b50,\u4e0b\u56fe\u7684\u9ed8\u8ba4\u503c\uff0c\u89c4\u5b9a\u4e0d\u6362\u884c\u4e86<\/p> \n

\u3000\u30001.align-items:stretch;\uff08\u9ed8\u8ba4\u503c\uff09<\/p> \n

 \u3000\u3000\"\"<\/p> \n

 <\/p> \n


\u3000\u30002.align-items:flex-end;\uff08\u4ea4\u53c9\u8f74\u7684\u7ec8\u70b9\u5bf9\u9f50\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

 <\/p> \n

\u3000\u30003. align-items:center;\uff08\u4e0e\u4ea4\u53c9\u8f74\u4e2d\u70b9\u5bf9\u9f50\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

 <\/p> \n

\u3000\u30004. align-items:baseline;\uff08\u9879\u76ee\u7684\u7b2c\u4e00\u884c\u6587\u5b57\u7684\u57fa\u7ebf\u5bf9\u9f50\uff09
\u3000\u3000\u8fd9\u91cc\u7684\u6587\u5b57\u7684\u5927\u5c0f\u8c03\u6574\u4e00\u4e0b\uff0c\u7b2c\u4e00\u4e2a\u6587\u5b57\u6539\u4e3a40px,<\/p> \n

\u3000\u3000\"\"<\/p> \n

 <\/p> \n

\u3000\u30005. align-items:flex-start;\uff08\u4ea4\u53c9\u8f74\u7684\u8d77\u70b9\u5bf9\u9f50\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

\u3000\u3000\u516d\u3001align-content\uff1a
\u3000\u3000\u5b9a\u4e49\u4e86\u591a\u6839\u8f74\u7ebf\u7684\u5bf9\u9f50\u65b9\u5f0f\uff0c\u5982\u679c\u9879\u76ee\u53ea\u6709\u4e00\u6839\u8f74\u7ebf\uff0c\u5219\u4e0d\u8d77\u4f5c\u7528\u3002
\u3000\u3000\u8fd9\u91cc\u6211\u7ed9\u8c03\u6574\u4e86\u4e00\u4e2a\u5bb9\u5668\u5c5e\u6027\u7684\u9ad8\u5ea6\u4e3a300px; \u6362\u884c\u663e\u793a
\u3000\u30001\u3001align-content: stretch\uff08\u9ed8\u8ba4\u503c\uff0c\u8f74\u7ebf\u5360\u6ee1\u6574\u4e2a\u4ea4\u53c9\u8f74\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

\u3000\u30002\u3001align-content: flex-star\uff08\u4e0e\u4ea4\u53c9\u8f74\u8d77\u70b9\u5bf9\u9f50\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

\u3000\u30003\u3001align-content: flex-end\uff08\u4e0e\u4ea4\u53c9\u8f74\u7ec8\u70b9\u5bf9\u9f50\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

\u3000\u30004\u3001align-content: center\uff08\u4e0e\u4ea4\u53c9\u8f74\u4e2d\u70b9\u5bf9\u9f50\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

\u3000\u30005\u3001align-content: space-between\uff08\u4e0e\u4ea4\u53c9\u8f74\u4e24\u7aef\u5bf9\u9f50\uff0c\u4e4b\u95f4\u5e73\u5747\u5206\u914d\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

\u3000\u30006\u3001align-content: space-around\uff08\u4ea4\u53c9\u8f74\u4e24\u4fa7\u95f4\u9694\u76f8\u7b49\uff09<\/p> \n

\u3000\u3000\"\"<\/p> \n

\u3000\u3000\u5728\u8fd9\u91cc\u5148\u4ecb\u7ecd\u8fd9\u4e48\u591a\uff0c\u4e0b\u4e00\u6b21\u5c31\u5206\u4eab\u4e00\u4e0b\u5f39\u6027\u76d2\u5b50\u9879\u76ee\u7684\u4e00\u4e9b\u5c5e\u6027\uff0c\u5982\u679c\u6709\u4e0d\u6e05\u695a\u7684\u5730\u65b9\u6216\u8005\u6587\u7ae0\u6709\u4e0d\u8db3\u4e4b\u5904\uff0c\u5e0c\u671b\u5404\u4f4d\u53ef\u4ee5\u6307\u6b63\uff0c\u5982\u679c\u4f60\u770b\u5230\u6211\u7684\u6587\u7ae0\u53ef\u4ee5\u6536\u83b7\u4e86\u4e00\u4e9b\u77e5\u8bc6\uff0c\u90a3\u4e48\u6211\u4f1a\u975e\u5e38\u9ad8\u5174\u7684\u3002<\/p> \n

 <\/p>\n<\/div>","orderid":"0","title":"\u5f39\u6027\u76d2\u6a21\u578b----\u5bb9\u5668\u5c5e\u6027","smalltitle":"","mid":"0","fname":"Web","special_id":"0","bak_id":"0","info":"0","hits":"9783","pages":"1","comments":"0","posttime":"2017-10-16 18:19:19","list":"1508149159","username":"admin","author":"","copyfrom":"","copyfromurl":"","titlecolor":"","fonttype":"0","titleicon":"0","picurl":"http:\/\/images2017.cnblogs.com\/blog\/1250927\/201710\/1250927-20171015224800559-1577448823.png","ispic":"1","yz":"1","yzer":"","yztime":"0","levels":"0","levelstime":"0","keywords":"\u5f39\u6027<\/A> \u6a21\u578b<\/A> ----<\/A> \u5bb9\u5668<\/A> \u5c5e\u6027<\/A>","jumpurl":"","iframeurl":"","style":"","template":"a:3:{s:4:\"head\";s:0:\"\";s:4:\"foot\";s:0:\"\";s:8:\"bencandy\";s:0:\"\";}","target":"0","ip":"113.108.110.181","lastfid":"0","money":"0","buyuser":"","passwd":"","allowdown":"","allowview":"","editer":"","edittime":"0","begintime":"0","endtime":"0","description":"\u5f39\u6027\u76d2\u6a21\u578b----\u5bb9\u5668\u5c5e\u6027","lastview":"1712182693","digg_num":"1206","digg_time":"0","forbidcomment":"0","ifvote":"0","heart":"","htmlname":"","city_id":"0"},"page":"1"}