ÕâÆªÎÄÕ½éÉÜÁËFlexboxÄ£¿éËùÓлù±¾¸ÅÄ¶øÇÒÊǽéÉÜFlexboxÄ£¿éµÄºÜºÃµÄһƪÎÄÕ£¬ËùÒÔÕâÆªÎÄÕ·dz£µÄ³¤£¬ÄãÒªÓÐËù×¼±¸¡£
ѧϰFlexboxµÄÇúÏß
@Philip RobertsÔÚTwitterÉÏ·¢ÁËÒ»¸öÍÆ£º

ѧϰFlexbox¿É²»ÊǼþºÜÓÐȤµÄÊÂÇ飬ÒòΪËü½«ÌôÕ½ÄãËùÖªµÀµÄCSS²¼¾Ö·½ÃæµÄ֪ʶ¡£µ±È»ÕâÒ²ÊǷdz£Õý³£µÄ£¬ÒòΪһÇÐ֪ʶ¶¼ÊÇÖµµÃѧϰµÄ¡£
ÁíÍâÄãÒªÈÏÖµ¶Ô´ýFlexbox¡£ÒòΪËüÊÇÏÖ´úWeb²¼¾ÖµÄÖ÷Á÷·½Ê½Ö®Ò»£¬²»»áºÜ¿ì¾ÍÏûʧ¡£ËüÒ²³ÉΪһ¸öеÄW3C±ê×¼¹æ·¶¡£¼ÈÈ»Èç´Ë£¬ÄÇÈÃÎÒÃÇÕÅ¿ªË«±Û£¬¿ªÊ¼Óµ±§Ëü°É£¡
Ä㽫ѧϰ
ÎÒ½«´øÄãÏÈÁ˽âFlexboxµÄһЩ»ù´¡ÖªÊ¶¡£ÎÒÏëÕâÊÇ¿ªÊ¼³¢ÊÔѧϰFlexboxµÄ±Ø¾½×¶Î¡£

ѧϰ»ù´¡ÖªÊ¶ÊǼþºÜÓÐÒâ˼µÄÊÂÇ飬¸üÓÐÒâ˼µÄÊÇ¿ÉÒÔͨ¹ýѧϰÕâЩ»ù´¡ÀíÂÛ֪ʶ£¬ÔÚʵ¼ÊµÄÓ¦ÓóÌÐòÖÐʹÓÃFlexbox¡£
ÎÒ½«´øÄúÇ×ÀúºÜ¶à¡°Ð¡ÖªÊ¶µã¡±Ö®ºó£¬ÔÚÎÄÕÂĩβ£¬Ê¹ÓÃFlexboxÀ´×öÒ»¸öÒôÀÖÓ¦ÓóÌÐòµÄ²¼¾Ö£¨UI½çÃæ²¼¾Ö£©¡£

¿´ÉÏÈ¥ÊDz»Êǰô°ôµÄ£¿
ÔÚ¿ªÊ¼½øÈëѧϰFlexbox¹¹½¨ÒôÀÖÓ¦ÓóÌÐòµÄ²¼¾Ö֮ǰ£¬Ä㻹½«ÐèÒªÁ˽âFlexboxÔÚÏìӦʽWebÉè¼ÆÖÐËùÆðµÄ×÷Óá£
ÎÒ½«»á°ÑÕâÒ»Çж¼¸æËßÄã¡£

ÉÏͼÊÇ@Jona DingesÉè¼ÆµÄ¡£
ÔÚÄ㿪ʼ¹¹½¨ÒôÀÖÓ¦ÓóÌÐò½çÃæÖ®Ç°£¬ÎÒ½«Ò»ÆðÅãÄã×öһЩÁ·Ï°¡£Õâ¿´ÆðÀ´¿ÉÄܺÜÎÞÁÄ£¬µ«ÕâÊÇÈÃÄã³¹µ×ÕÆÎÕFlexbox±Ø¾µÄ¹ý³Ì£¬Ö»ÓÐÕâÑù²ÅÄÜÈÃÄãºÜÉó¤µÄʹÓÃFlexbox¡£
˵ÁËÕâô¶àµÄ·Ï»°£¬ÄÇÎÒÃǸϽôµÄ¿ªÊ¼°É£¡£¨ÄÑ¹ÖÆª·ù³¤£¬ÔÀ´¿ªÊ¼ÓÐÕâôµÄ¡(^_^)£©
¼ò½é

CSSÔÚ¹ýÈ¥µÄ¼¸ÄêÀïÒÑ·¢ÉúÁ˺ܴóµÄ±ä»¯¡£CSSÖÐÒýÈëÁËÉè¼ÆÊ¦Ï²»¶µÄfilters¡¢transitionsºÍtransformsµÈ¡£µ«ÓÐЩ¶«Î÷ÒѾÏûʧÁË£¬¿ÉÊÇÎÒÃǶ¼¿ÊÍûÕâЩ¶«Î÷ÄÜÒ»Ö±´æÔÚ¡£
ʹÓÃCSSÖÆ×÷ÖÇÄܵġ¢Áé»îµÄÒ³Ãæ²¼¾ÖÒ»Ö±ÒÔÀ´¶¼ÊÇCSSerÏëÒªµÄ£¬Ò²ÓкÜÈËʹÓø÷ÖÖ²»Í¬µÄCSSºÚħ·¨È¥ÊµÏÖÖÇÄܵÄÒ³Ãæ²¼¾Ö¡£
ÎÒÃÇ×ÜÊDz»µÃ²»ÈÌÊÜfloat¡¢display:tableÕâЩ²¼¾Ö·½Ê½´øÀ´µÄÍ´¿à¡£Èç¹ûÄãÍêд¹ýÒ»¶Îʱ¼äµÄCSS£¬Äã¿ÉÄÜÓÐÏà¹ØÌå»á¡£Èç¹ûÄãûÓÐд¹ýCSS£¬ÄÇÄãÊÇÐÒÔ˵ģ¬ÔÚÕâÒ²»¶ÓÄãÀ´µ½CSS²¼¾ÖÖÐÒ»¸ö¸üÃÀºÃµÄÊÀ½çÖУ¡
ËÆºõÉè¼ÆÊ¦ºÍǰ¶Ë¿ª·¢ÈËÔ±µÄÕâ´ÎÆíµ»ÖÕÓÚ±»ÉϵÛÌýµ½ÁË¡£¶øÇÒÕâÒ»´Î£¬ÔںܴóµÄ·ç¸ñÉÏ×ö³öÁ˸ı䡣
ÏÖÔÚÎÒÃÇ¿ÉÒÔÅׯúÀÏ˾»úÃdz£ÓõÄCSS²¼¾ÖµÄºÚħ·¨¡£Ò²¿ÉÒÔºÍfloatÒÔ¼°display:table˵°Ý°Ý¡£
ÊÇʱºòÈ¥Óµ±§Ò»¸ö¸ü¼ò½àµÄÖÆ×÷ÖÇÄܲ¼¾ÖµÄÏÖ´úÓï·¨¡£»¶ÓCSS FlexboxÄ£¿éµÄµ½À´¡£
FlexboxÊÇʲô
¸ù¾Ý¹æ·¶ÖеÄÃèÊö¿ÉÖªµÀ£¬FlexboxÄ£¿éÌṩÁËÒ»¸öÓÐЧµÄ²¼¾Ö·½Ê½£¬¼´Ê¹²»ÖªµÀÊÓ´°´óС»òÕßÎ´ÖªÔªËØÇé¿ö֮϶¼¿ÉÒÔÖÇÄܵģ¬Áé»îµÄµ÷ÕûºÍ·ÖÅäÔªËØºÍ¿Õ¼äÁ½ÕßÖ®¹ØµÄ¹ØÏµ¡£¼òµ¥µÄÀí½â£¬¾ÍÊÇ¿ÉÒÔ×Ô¶¯µ÷Õû£¬¼ÆËãÔªËØÔÚÈÝÆ÷¿Õ¼äÖеĴóС¡£
ÕâÑùÌýÆðÀ´ÊDz»ÊÇÌ«¹Ù·½ÁË£¬ÆäʵÎÒÒ²Ã÷°×ÕâÖָоõ¡£
ÈçºÎ¿ªÊ¼Ê¹ÓÃFlexbox
ÕâÊÇÿ¸öÈ˶¼»áÎʵĵÚÒ»¸öÎÊÌ⣬´ð°¸ÊDZÈÄãÔ¤ÏëµÄÒª¼òµ¥µÃ¶à¡£
¿ªÊ¼Ê¹ÓÃFlexboxʱ£¬ÄãËùÒª×öµÄµÚÒ»¼þÊÂÇé¾ÍÊÇÉùÃ÷Ò»¸öFlexÈÝÆ÷(Flex Container)¡£
±ÈÈçÒ»¸ö¼òµ¥µÄÏîÄ¿ÁÐ±í£¬ÎÒÃdz£³£¿´µ½µÄHTMLÐÎʽÈçÏÂËùʾ£º
<ul> <!--parent element-->
<li></li> <!--first child element-->
<li></li> <!--second child element-->
<li></li> <!--third child element-->
</ul> |
Ò»ÑÛ¾ÍÄÜ¿´³öÀ´£¬Õâ¾ÍÊÇÒ»¸öÎÞÐòÁбí(ul)ÀïÓÐÈý¸öÁбíÔªËØ(li)¡£
Äã¿ÉÒÔ°Ñul³ÆÎª¸¸ÔªËØ£¬li³ÆÎª×ÓÔªËØ¡£
Òª¿ªÊ¼Ê¹ÓÃFlexbox£¬±ØÐëÏÈÈø¸ÔªËرä³ÉÒ»¸öFlexÈÝÆ÷¡£
Äã¿ÉÒÔÔÚ¸¸ÔªËØÖÐÏÔʽµÄÉèÖÃdisplay:flex»òÕßdisplay:inline-flex¡£¾ÍÕâôµÄ¼òµ¥£¬ÕâÑùÄã¾Í¿ÉÒÔ¿ªÊ¼Ê¹ÓÃFlexboxÄ£¿é¡£
ʵ¼ÊÊÇÏÔʽÉùÃ÷ÁËFlexÈÝÆ÷Ö®ºó£¬Ò»¸öFlexbox¸ñʽ»¯ÉÏÏÂÎÄ£¨Flexbox formatting context£©¾ÍÁ¢¼´Æô¶¯ÁË¡£
¸æËßÄ㣬Ëü²»ÊÇÏñÄãÏëÏñµÄÄÇô¸´ÔÓ¡£

ʹÓÃÒ»¸öÎÞÐòÁбí(ul)ºÍһȺÁбíÔªËØ(li)£¬Æô¶¯Flexbox¸ñʽ»¯ÉÏÏÂÎĵķ½Ê½ÈçÏ£º
/* ÉùÃ÷¸¸ÔªËØÎªflexÈÝÆ÷ */
ul {
display:flex; /*»òÕß inline-flex*/
} |
¸øÁбíÔªËØ(li)Ìí¼ÓÒ»µã»ù±¾Ñùʽ£¬ÕâÀïÄã¿ÉÒÔ¿´µ½·¢ÉúÁËʲô¡£
li {
width: 100px;
height: 100px;
background-color: #8cacea;
margin: 8px;
} |
Ä㽫¿´µ½µÄЧ¹ûÈçÏÂͼËùʾ£º

Äã¿ÉÄÜûÓÐ×¢Òâµ½£¬µ«ÊÂʵÉÏÒѾ·¢ÉúÁ˱仯¡£ÏÖÔÚÒѾÊÇÒ»¸öFlexbox¸ñʽ»¯ÉÏÏÂÎÄ¡£
¼Çס£¬Ä¬ÈÏÇé¿öÏ£¬divÔÚCSSÖд¹Ö±¶ÑÕ»µÄ£¬Ò²¾ÍÊÇ˵´ÓÉϵ½ÏÂÅÅÁÐÏÔʾ£¬¾ÍÏñÏÂͼÕâÑù£º

ÉÏÃæµÄͼÊÇÄãÏ£ÍûµÄ½á¹û¡£
È»¶ø£¬¼òµ¥µÄдһÐдúÂëdisplay:flex£¬ÄãÁ¢¼´¾Í¿ÉÒÔ¿´µ½²¼¾Ö¸Ä±äÁË¡£
ÏÖÔÚÁбíÔªËØ(li)ˮƽÅÅÁУ¬´Ó×óµ½ÓÒ¡£¾ÍÏñÊÇÄãʹÓÃÁËfloatÒ»Ñù¡£

FlexboxÄ£¿éµÄ¿ªÊ¼£¬ÕýÈçÇ°ÃæµÄ½éÉÜ£¬ÔÚÈκθ¸ÔªËØÉÏʹÓÃdisplay:flex¡£
Äã¿ÉÄܲ»Ã÷°×ΪʲôÕâÒ»±ä»¯¾ÍÄܸıäÁбíÔªËØµÄÅÅÁз½Ê½¡£µ«ÎÒ¿ÉÒÔ¸ºÔðÈεĸæËßÄ㣬ÄãÉîÈëѧϰ֮ºó¾ÍÄÜÃ÷°×¡£ÏÖÔÚÄãÖ»ÐèÒªÐÅÈξÍ×ã¹»ÁË¡£
Àí½âflex displayÊÇʹÓÃFlexboxµÄÒ»¸ö¿ªÊ¼¡£
»¹ÓÐÒ»¼þÊÂÇ飬ÎÒÐèÒªÌáÐÑÄú×¢Òâ¡£
Ò»µ©ÄãÏÔʽµÄÉèÖÃÁËdisplayÊôÐÔµÄֵΪflex£¬ÎÞÐòÁбíul¾Í»á×Ô¶¯±ä³ÉFlexÈÝÆ÷£¬¶øÆä×ÓÔªËØ£¨ÔÚ±¾ÀýÖÐÊÇÖ¸ÁбíÔªËØli£©¾Í±ä³ÉÁËFlexÏîÄ¿¡£
ÕâЩÊõÓï»áÒ»´ÎÓÖÒ»´ÎµÄÌáµ½£¬ÎÒ¸üÏ£ÍûÄãͨ¹ýһЩ¸üÓÐȤµÄ¶«Î÷À´°ïÖúÄãѧϰFlexboxÄ£¿é¡£
ÎÒʹÓÃÁËÁ½¸ö¹Ø¼ü´Ê£¬ÎÒÃǰÑÖØµã·Åµ½ËûÃÇÉíÉÏ¡£Á˽âËûÃǶÔÓÚÀí½âºóÃæµÄ֪ʶÖÁ¹ØÖØÒª¡£
FlexÈÝÆ÷£¨Flex Container£©£º¸¸ÔªËØÏÔʽÉèÖÃÁËdisplay:flex
FlexÏîÄ¿£¨Flex Items£©£ºFlexÈÝÆ÷ÄÚµÄ×ÓÔªËØ

ÕâЩֻÊÇFlexboxÄ£¿éµÄ»ù´¡¡£
FlexÈÝÆ÷ÊôÐÔ
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content |

ͨ¹ýÉÏÃæµÄÄÚÈÝ£¬ÎÒÃÇÁ˽âÁËһЩ»ù´¡ÖªÊ¶¡£ÖªµÀÁËFlexÈÝÆ÷ºÍFlexÏîÄ¿ÊÇʲô£¬ÒÔ¼°ÈçºÎÆô¶¯FlexboxÄ£¿é¡£
ÏÖÔÚÊÇÒ»¸öºÃºÃÀûÓÃËüÃǵÄʱ¼äÁË¡£
ÓÐÉèÖÃÒ»¸ö¸¸ÔªËØ×÷Ϊһ¸öFlexÈÝÆ÷£¬¼¸¸ö¶ÔÆëÊôÐÔ¿ÉÒÔʹÓÃÔÚFlexÈÝÆ÷ÉÏ¡£
ÕýÈçÄãµÄ¿éÔªËØµÄwidthÉèÖÃÁË200px£¬ÓÐÁùÖÖ²»Í¬µÄÊôÐÔ¿ÉÒÔÓÃÓÚFlexÈÝÆ÷¡£
ºÃÏûÏ¢ÊÇ£¬¶¨ÒåÕâЩÊôÐÔ²»Í¬ÓÚÄãÒÔÍùʹÓùýµÄÈκÎÒ»ÖÖ·½·¨¡£
flex-direction
flex-directionÊôÐÔ¿ØÖÆFlexÏîÄ¿ÑØ×ÅÖ÷ÖᣨMain Axis£©µÄÅÅÁз½Ïò¡£
Ëü¾ßÓÐËĸöÖµ£º
/* ul ÊÇÒ»¸öflexÈÝÆ÷ */
ul {
flex-direction: row || column || row-reverse || column-reverse;
} |
¼òµ¥µãÀ´Ëµ£¬¾ÍÊÇflex-directionÊôÐÔÈÃÄã¾ö¶¨FlexÏîÄ¿ÈçºÎÅÅÁС£Ëü¿ÉÒÔÊÇÐУ¨Ë®Æ½£©¡¢ÁУ¨´¹Ö±£©»òÕßÐкÍÁеķ´Ïò¡£
´Ó¼¼ÊõÉϽ²£¬Ë®Æ½ºÍ´¹Ö±ÔÚFlexÊÀ½çÖв»ÊÇʲô·½Ïò£¨¸ÅÄ¡£ËüÃdz£³£±»³ÆÎªÖ÷ÖᣨMain-Axis£©ºÍ²àÖᣨCross-Axis£©¡£Ä¬ÈÏÉèÖÃÈçÏÂËùʾ¡£

ͨË×µÄ˵£¬¸Ð¾õMain-Axis¾ÍÊÇˮƽ·½Ïò£¬´Ó×óµ½ÓÒ£¬ÕâÒ²ÊÇĬÈÏ·½Ïò¡£Cross-AxisÊÇ´¹Ö±·½Ïò£¬´ÓÉÏÍùÏ¡£
ĬÈÏÇé¿öÏ£¬flex-directionÊôÐÔµÄÖµÊÇrow¡£ËüÈÃFlexÏîÄ¿ÑØ×ÅMain-AxisÅÅÁУ¨´Ó×óÏòÓÒ£¬Ë®Æ½ÅÅÁУ©¡£Õâ¾Í½âÊÍÁ˱¾ÎÄ¿ªÊ¼²¿·ÖʱÎÞÐòÁбíµÄ±íÏÖЧ¹û¡£
¾¡¹Üflex-directionÊôÐÔ²¢Ã»ÓÐÏÔʽµÄÉèÖ㬵«ËüµÄĬÈÏÖµÊÇrow¡£FlexÏîÄ¿½«ÑØ×ÅMain-Axis´Ó×óÏòÓÒˮƽÅÅÁС£

Èç¹û°Ñflex-directionµÄÊôÐÔÖµÐ޸ijÉcolumn£¬ÕâʱFlexÏîÄ¿½«ÑØ×ÅCross-Axis´ÓÉϵ½Ï´¹Ö±ÅÅÁС£²»ÔÙÊÇ´Ó×óÏòÓÒÅÅÁС£

flex-wrap
flex-wrapÊôÐÔÓÐÈý¸öÊôÐÔÖµ£º
ul {
flex-wrap: wrap || nowrap || wrap-reverse;
} |
ÎÒ½«Í¨¹ýÒ»¸öÀý×ÓÀ´½âÊÍÈçºÎʹÓÃflex-wrapÊôÐÔ¡£Ê×ÏÈÔÚÇ°ÃæµÄÎÞÐòÁбíµÄHTML½á¹¹ÖжàÌí¼Ó¼¸¸öÁбíÏîli¡£
½«FlexÈÝÆ÷ÉèÖÃÊʺϴóСÒÔÊʺϷÅÖøü¶àµÄÁбíÏîÄ¿»òÕß˵ÈÃÁбíÏîÄ¿»»ÐÐÅÅÁС£ÕâÁ½ÖÖ·½Ê½£¬ÄãÊÇÔõôÏëµÄ£¿
<ul> <!--parent element-->
<li></li> <!--first child element-->
<li></li> <!--second child element-->
<li></li> <!--third child element-->
<li></li>
<li></li>
<li></li>
</ul> |
ÐÒÔ˵ÄÊÇ£¬ÐÂÌí¼ÓµÄFlexÏîÄ¿¸ÕºÃÊʺÏFlexÈÝÆ÷´óС¡£Ò²¾ÍÊÇFlexÏîÄ¿ÄܸպÃÌî³äFlexÈÝÆ÷¡£

ÔÙÉîÈëÒ»µã¡£
¼ÌÐø¸øFlexÈÝÆ÷ÄÚÌí¼ÓFlexÏîÄ¿£¬±ÈÈç˵Ìí¼Óµ½10¸öFlexÏîÄ¿¡£Õâ¸öʱºò»á·¢Éúʲô£¿

ͬÑùµÄ£¬FlexÈÝÆ÷»¹ÊÇÄÜÈÝÄÉËùÓеÄ×ÓÔªËØ£¨FlexÏîÄ¿£©ÅÅÁУ¬¼´Ê¹ä¯ÀÀÆ÷³öÏÖÁËˮƽ¹ö¶¯Ìõ£¨µ±FlexÈÝÆ÷ÖÐÌí¼ÓÁ˺ܶà¸öFlexÏîÄ¿£¬ÖÁʹFlexÈÝÆ÷µÄ¿í¶È´óÓÚÊÓ´°¿í¶È£©¡£
ÕâÊÇÿһ¸öFlexÈÝÆ÷µÄĬÈÏÐÐΪ¡£FlexÈݹ¾àà»áÔÚÒ»ÐÐÄÚÈÝÄÉËùÓеÄFlexÏîÄ¿¡£ÕâÊÇÒòΪflex-wrapÊôÐÔµÄĬÈÏÖµÊÇnowrap¡£Ò²¾ÍÊÇ˵£¬FlexÏîÄ¿ÔÚFlexÈÝÆ÷ÄÚ²»»»ÐÐÅÅÁС£
ul {
flex-wrap: nowrap; /*FlexÈÝÆ÷ÄÚµÄFlexÏîÄ¿²»»»ÐÐÅÅÁÐ*/
} |
no-wrap²»ÊDz»¿É¸Ä±äµÄ¡£ÎÒÃÇ¿ÉÒԸı䡣
µ±ÄãÏ£ÍûFlexÈÝÆ÷ÄÚµÄFlexÏîÄ¿´ïµ½Ò»¶¨ÊýÁ¿Ê±£¬ÄÜ»»ÐÐÅÅÁС£µ±FlexÈÝÆ÷ÖÐûÓÐ×ã¹»µÄ¿Õ¼ä·ÅÖÃFlexÏîÄ¿£¨FlexÏîĿĬÈÏ¿í¶È£©£¬ÄÇôFlexÏîÄ¿½«»á»»ÐÐÅÅÁС£°ÑËü£¨flex-wrap£©µÄÖµÉèÖÃΪwrap¾ÍÓÐÕâÖÖ¿ÉÄÜ£º
ÏÖÔÚFlexÏîÄ¿ÔÚFlexÈÝÆ÷Öоͻá¶àÐÐÅÅÁС£
ÔÚÕâÖÖÇé¿öÏ£¬µ±Ò»ÐÐÔÙ²»Äܰüº¬ËùÓÐÁбíÏîµÄĬÈÏ¿í¶È£¬ËûÃǾͻá¶àÐÐÅÅÁС£¼´Ê¹µ÷Õûä¯ÀÀÆ÷´óС¡£
¾ÍÊÇÕâÑù×Ó¡£×¢Ò⣺FlexÏîÄ¿ÏÖÔÚÏÔʾµÄ¿í¶ÈÊÇËûÃǵÄĬÈÏ¿í¶È¡£Ò²Ã»ÓбØÒªÇ¿ÆÈÒ»ÐÐÓжàÉÙ¸öFlexÏîÄ¿¡£

³ý´ËÖ®Í⣬»¹ÓÐÒ»¸öÖµ£ºwrap-reverse¡£
Êǵģ¬Äã²Â¶ÔÁË¡£ËüÈÃFlexÏîÄ¿ÔÚÈÝÆ÷ÖжàÐÐÅÅÁУ¬Ö»ÊÇ·½ÏòÊÇ·´µÄ¡£

flex-flow
flex-flowÊÇflex-directionºÍflex-wrapÁ½¸öÊôÐÔµÄËÙ¼ÇÊôÐÔ¡£
Ä㻹¼ÇµÃʹÓÃborderµÄËÙ¼Çд·¨£¿border: 1px solid red¡£ÕâÀïµÄ¸ÅÄîÊÇÏàͬµÄ£¬¶à¸öֵдÔÚͬһÐУ¬±ÈÈçÏÂÃæµÄʾÀý£º
ul {
flex-flow: row wrap;
} |

Ï൱ÓÚ£º
ul {
flex-direction: row;
flex-wrap: wrap;
} |
³ýÁËÕâ¸ö×éºÏÖ®Í⣬Ä㻹¿ÉÒÔ³¢ÊÔһЩÆäËüµÄ×éºÏ¡£flex-flow: row nowrap£¬flex-flow: column wrap£¬flex-flow: column nowrap¡£
ÎÒÏàÐÅÄãÁ˽âÕâЩ»á²úÉúʲôÑùµÄЧ¹û£¬Òª²»³¢ÊÔһϡ£
justify-content
FlexboxÄ£¿éÕæµÃºÜºÃ¡£Èç¹ûÄãÈÔÈ»²»ÏàÐÅËüµÄ÷ÈÁ¦£¬ÄÇôjustify-contentÊôÐÔ¿ÉÄÜ»á˵·þÄã¡£
justify-contentÊôÐÔ¿ÉÒÔ½ÓÊÜÏÂÃæÎå¸öÖµÖ®Ò»£º
ul {
justify-content: flex-start || flex-end || center || space-between || space-around
} |
justify-contentÊôÐÔÓÖÄܸøÎÒÃÇ´øÀ´Ê²Ã´ÄØ£¿ÌáÐÑÄãһϣ¬ÄãÊÇ·ñ»¹¼ÇµÃtext-alignÊôÐÔ¡£Æäʵjustify-contentÊôÐÔÖ÷Òª¶¨ÒåÁËFlexÏîÄ¿ÔÚMain-AxisÉÏµÄ¶ÔÆë·½Ê½¡£
À´¿´Ò»¸ö¼òµ¥µÄÀý×Ó£¬»¹ÊÇ¿¼ÂÇÏÂÃæÕâ¸ö¼òµ¥µÄÎÞÐòÁÐ±í£º
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul> |
Ìí¼ÓһЩ»ù±¾Ñùʽ£º
ul {
display:flex;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
} |
Ä㽫¿´µ½µÄЧ¹ûÊÇÕâÑù£º

ͨ¹ýjustify-contentÊôÐÔ£¬¿ÉÒÔÈÃFlexÏîÄ¿ÔÚÕû¸öMain-AxisÉϰ´ÕÕÎÒ×Ô¼ºµÄÓûÍûÉèÖÃÆä¶ÔÆë·½Ê½¡£
¿ÉÄÜ»áÓÐÒÔϼ¸ÖÖÀàÐÍ¡£
flex-start
justify-contentµÄĬÈÏÊôÐÔÖµÊÇflex-start¡£
flex-startÈÃËùÓÐFlexÏîÄ¿¿¿Main-Axis¿ªÊ¼±ßÔµ£¨×ó¶ÔÆë£©¡£
ul {
justify-content: flex-start;
} |

flex-end
flex-endÈÃËùÓÐFlexÏîÄ¿¿¿Main-Axis½áÊø±ßÔµ£¨ÓÒ¶ÔÆë£©¡£
ul {
justify-content: flex-end;
} |

center
ºÍÄãÔ¤ÆÚµÄÒ»Ñù£¬centerÈÃËùÓÐFlexÏîÄ¿ÅÅÔÚMain-AxisÖм䣨¾ÓÖÐ¶ÔÆë£©¡£
ul {
justify-content: center;
} |

space-between
space-betweenÈóýÁ˵ÚÒ»¸öºÍ×îÒ»¸öFlexÏîÄ¿µÄÁ½Õß¼ä¼ä¾àÏàͬ£¨Á½¶Ë¶ÔÆë£©¡£
ul {
justify-content: space-between;
} |

Äã×¢Òâµ½ÓÐʲô²»Í¬£¿¿´¿´ÏÂͼµÄÃèÊö£º

space-around
×îºó£¬space-aroundÈÃÿ¸öFlexÏîÄ¿¾ßÓÐÏàͬµÄ¿Õ¼ä¡£
ul {
justify-content: space-around;
} |

ºÍspace-betweenÓе㲻ͬ£¬µÚÒ»¸öFlexÏîÄ¿ºÍ×îºóÒ»¸öFlexÏîÄ¿¾àMain-Axis¿ªÊ¼±ßÔµºÍ½áÊø±ßÔµµÄµÄ¼ä¾àÊÇÆäËûÏàÁÚFlexÏîÄ¿¼ä¾àµÄÒ»°ë¡£¿´¿´ÏÂͼµÄÃèÊö£º

ǧÍò²»Òª¾õµÃÕâЩÁ·Ï°Ì«¶à£¬ÕâЩÁ·Ï°¿ÉÒÔ°ïÖúÊìϤFlexboxÊôÐÔµÄÓï·¨¡£Ò²ÄܸüºÃµÄ°ïÖúÄã¸üºÃµÄÀí½âËüÃÇÊÇÈçºÎÓ°ÏìFlexÏîÄ¿ÑØ×ÅMain-AxisµÄ¶ÔÆë·½Ê½¡£
align-items
align-itemsÊôÐÔÀàËÆÓÚjustify-contentÊôÐÔ¡£Ö»ÓÐÀí½âÁËjustify-contentÊôÐÔ£¬²ÅÄܸüºÃµÄÀí½âÕâ¸öÊôÐÔ¡£
align-itemsÊôÐÔ¿ÉÒÔ½ÓÊÜÕâЩÊôÐÔÖµ£ºflex-start || flex-end || center || stretch || baseline¡£
ul {
align-items: flex-start || flex-end || center || stretch || baseline
} |
ËüÖ÷ÒªÓÃÀ´¿ØÖÆFlexÏîÄ¿ÔÚCross-Axis¶ÔÆë·½Ê½¡£ÕâÒ²ÊÇalign-itemsºÍjustify-contentÁ½¸öÊôÐÔÖ®¼äµÄ²»Í¬Ö®´¦¡£
ÏÂÃæÊDz»Í¬µÄÖµ¶ÔFlexÏîÄ¿²úÉúµÄÓ°Ïì¡£²»ÒªÍü¼ÇÕâЩÊôÐÔÖ»¶ÔCross-AxisÖáÓÐÓ°Ïì¡£
stretch
align-itemsµÄĬÈÏÖµÊÇstretch¡£ÈÃËùÓеÄFlexÏîÄ¿¸ß¶ÈºÍFlexÈÝÆ÷¸ß¶ÈÒ»Ñù¡£

flex-start
ÕýÈçÄãËùÏ£ÍûµÄflex-startÈÃËùÓÐFlexÏîÄ¿¿¿Cross-Axis¿ªÊ¼±ßÔµ£¨¶¥²¿¶ÔÆë£©¡£

flex-end
flex-endÈÃËùÓÐFlexÏîÄ¿¿¿Cross-Axis½áÊø±ßÔµ£¨µ×²¿¶ÔÆë£©¡£

center
centerÈÃFlexÏîÄ¿ÔÚCross-AxisÖм䣨¾ÓÖÐ¶ÔÆë£©¡£

baseline
ÈÃËùÓÐFlexÏîÄ¿ÔÚCross-AxisÉÏÑØ×ÅËûÃÇ×Ô¼ºµÄ»ùÏß¶ÔÆë¡£

½á¹û¿´ÉÏÈ¥ÓеãÏñflex-start£¬µ«ÂÔÓв»Í¬¡£ÄÇ¡°baseline¡±µ½µ×ÊÇÊ²Ã´ÄØ£¿ÏÂͼӦ¸ÃÄܰïÖúÄã¸üºÃµÄÀí½â¡£

align-content
»¹¼ÇµÃÇ°ÃæÌÖÂÛµÄwrapÊôÐÔÂð£¿ÎÒÃÇÔÚFlexÈÝÆ÷ÖÐÌí¼ÓÁ˸ü¶àµÄFlexÏîÄ¿¡£ÈÃFlexÈÝÆ÷ÖеÄFlexÏîÄ¿¶àÐÐÅÅÁС£
align-contentÊôÐÔÓÃÓÚ¶àÐеÄFlexÈÝÆ÷¡£ËüÒ²ÊÇÓÃÀ´¿ØÖÆFlexÏîÄ¿ÔÚFlexÈÝÆ÷ÀïµÄÅÅÁз½Ê½£¬ÅÅÁÐЧ¹ûºÍalign-itemsÖµÒ»Ñù£¬µ«³ýÁËbaselineÊôÐÔÖµ¡£
Ïñalign-itemsÊôÐÔÒ»Ñù£¬ËüµÄĬÈÏÖµÊÇstretch¡£ÄãÏÖÔÚÓ¦¸ÃÊìϤÕâЩֵ¡£ÄÇËüÓÖÊÇÈçºÎÓ°ÏìFlexÈÝÆ÷ÀïµÄ10¸öFlexÏîÄ¿¶àÐÐÅÅÁз½Ê½¡£
stretch
ʹÓÃstretch»áÀÉìFlexÏîÄ¿£¬ÈÃËûÃÇÑØ×ÅCross-AxisÊÊÓ¦FlexÈÝÆ÷¿ÉÓõĿռ䡣
Äã¿´µ½µÄFlexÏîÄ¿¼äµÄ¼ä¾à£¬ÊÇFlexÏîÄ¿×ÔÉíÉèÖõÄmarginÖµ¡£

flex-start
֮ǰÄã¿´µ½¹ýflex-start¡£Õâ´ÎÊÇÈöàÐÐFlexÏîÄ¿¿¿Cross-Axis¿ªÊ¼±ßÔµ¡£ÑØ×ÅCross-Axis´ÓÉϵ½ÏÂÅÅÁС£Òò´ËFlexÏîÄ¿ÔÚFlexÈÝÆ÷Öж¥²¿¶ÔÆë¡£

flex-end
flex-end¸ÕºÃºÍflex-startÏà·´£¬ÈöàÐÐFlexÏîÄ¿¿¿×ÅCross-Axis½áÊøÎ»Öá£ÈÃFlexÏîÄ¿ÑØ×ÅCross-Axis´Óϵ½ÉÏÅÅÁУ¬¼´µ×²¿¶ÔÆë¡£

center
Äã²Âµ½ÁË£¬centerÈöàÐÐFlexÏîÄ¿ÔÚCross-AxisÖм䡣ÔÚFlexÈÝÆ÷ÖоÓÖÐ¶ÔÆë¡£

ÕâÊÇFlexÈÝÆ÷µÄ×îºóÒ»¸öÊôÐÔ¡£ÄãÏÖÔÚÖªµÀÈçºÎʹÓø÷ÖÖFlexÈÝÆ÷ÊôÐÔ¡£Äã¿ÉÒÔÔÚ¹¤×÷ÖÐʵ¼ùÕâЩÊôÐÔ¡£
FlexÏîÄ¿ÊôÐÔ
order || flex-grow || flex-shrink || flex-basis |

ÔÚǰһ½ÚÖУ¬ÎÒ½âÊÍÁËFlexÈÝÆ÷¼°Æä¶ÔÆëÊôÐÔ¡£
ȷʵƯÁÁ¡£ÎÒÏëÄãÒ²ÕÒµ½Á˸оõ¡£ÏÖÔÚÎÒÃǰÑ×¢ÒâÁ¦´ÓFlexÈÝÆ÷×ªÒÆµ½FlexÏîÄ¿¼°Æä¶ÔÆëÊôÐÔ¡£
ÏñFlexÈÝÆ÷£¬¶ÔÆëÊôÐÔÒ²¿ÉÒÔÓÃÔÚËùÓеÄFlexÏîÄ¿¡£ÄÇÎÒÃÇ¿ªÊ¼°É¡£
order
ÔÊÐíFlexÏîÄ¿ÔÚÒ»¸öFlexÈÝÆ÷ÖÐÖØÐÂÅÅÐò¡£»ù±¾ÉÏ£¬Äã¿ÉÒԸıäFlexÏîÄ¿µÄ˳Ðò£¬´ÓÒ»¸öλÖÃÒÆ¶¯µ½ÁíÒ»¸öµØ·½¡£
Õâ²»»áÓ°ÏìÔ´´úÂë¡£ÕâÒ²Òâζ×ÅFlexÏîÄ¿µÄλÖÃÔÚHTMLÔ´´úÂëÖв»ÐèÒª¸Ä±ä¡£orderÊôÐÔµÄĬÈÏÖµÊÇ0¡£Ëü¿ÉÒÔ½ÓÊÜÒ»¸öÕýÖµ£¬Ò²¿ÉÒÔ½ÓÊÜÒ»¸ö¸ºÖµ¡£
ÖµµÃ×¢ÒâµÄÊÇ£¬FlexÏîÄ¿»á¸ù¾ÝorderÖµÖØÐÂÅÅÐò¡£´Óµ×µ½¸ß¡£
Ҫ˵Ã÷×ܵÃÐèÒªÒ»¸öÀý×Ó¡£¿¼ÂÇÏÂÃæÕâ¸öÎÞÐòÁÐ±í£º
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul> |
ĬÈÏÇé¿öÏ£¬ËùÓÐFlexÏîÄ¿µÄorderÖµ¶¼ÊÇ0¡£°ÑÇ°Ãæ¸øÁбíµÄÑùʽÔËÓùýÀ´¡£¿´µ½µÄЧ¹ûÈçÏ£º

FlexÏîÄ¿ÏÔʾÊǰ´HTMLÔ´´úÂëÖеÄ˳ÐòÀ´ÏÔʾ£¬FlexÏîÄ¿1¡¢2¡¢3ºÍ4¡£
Èç¹ûÒòΪijЩÔÒò£¬ÔÚ²»¸Ä±äHTMLÎĵµÔ´ÂëÇé¿ö֮ϣ¬Ïë°ÑFlexÏîĿһ´Ó1±ä³É×îºó¡£²»ÄÜÐÞ¸ÄHTMLÎĵµÔ´ÂëÒâ˼ÊÇÄã²»ÄܰÑHTML´úÂë¸Ä³É£º
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>1</li>
</ul> |
Õâ¸öʱºò¾ÍÐèÒªorderÊôÐÔ¡£Õâ¸öʱºòÄãÐèÒª°ÑFlexÏîĿһµÄorderÖµÉèÖÃ±ÈÆäËûFlexÏîĿֵ¸ü´ó¡£
Èç¹ûÄãÒÔǰʹÓùýz-indexÊôÐÔ£¬ÄÇÄã¾ÍÄܸüºÃµÄÀí½âÕâ¸öÊôÐÔ¡£
li:nth-child(1){
order: 1; /*ÉèÖÃÒ»¸ö±È0¸ü´óµÄÖµ*/
} |
FlexÏîÄ¿¾ÍÖØÐ½øÐÐÁËÅÅÁУ¬´ÓµÍµ½¸ßÅÅÁС£²»ÒªÍü¼ÇÁË£¬Ä¬ÈÏÇé¿öÏ£¬FlexÏîÄ¿2¡¢3¡¢4µÄorderֵΪ0¡£ÏÖÔÚFlexÏîÄ¿1µÄorderֵΪ1¡£

FlexÏîÄ¿2¡¢3ºÍ4µÄorderÖµ¶¼ÊÇ0¡£HTMLÔ´´úÂëÖÈÐò²¢Ã»ÓÐÐ޸Ĺý¡£Èç¹û¸øFlexÏîÄ¿2µÄorderÉèÖÃΪ2ÄØ£¿
Êǵģ¬Äã²Â¶ÔÁË¡£ËüÒ²Ôö¼Ó¶ÑÕ»¡£ÏÖÔÚ´ú±íFlexÏîÄ¿µÄ×î¸ßµÄorderÖµ¡£

µ±Á½¸öFlexÏîÄ¿¾ßÓÐÏàͬµÄorderֵĨ£¿ÔÚÏÂÃæµÄʾÀýÖУ¬°ÑFlexÏîÄ¿1ºÍ3ÉèÖÃÏàͬµÄorderÖµ¡£
li:nth-child(1) {
order: 1;
}
li:nth-child(3) {
order: 1;
} |

ÏÖÔÚÈÔÊǴӵ͵½¸ßÅÅÁС£Õâ´ÎFlexÏîÄ¿3ÅÅÔÚFlexÏîÄ¿1ºóÃæ£¬ÄÇÊÇÒòΪÔÚHTMLÎĵµÖÐFlexÏîÄ¿3³öÏÖÔÚFlexÏîÄ¿1ºóÃæ¡£
Èç¹ûÁ½¸öÒÔÏÂFlexÏîÄ¿ÓÐÏàͬµÄorderֵʱ£¬FlexÏîÄ¿ÖØÐÂÅÅÐòÊÇ»ùÓÚHTMLÔ´ÎļþµÄλÖýøÐÐÅÅÐò¡£Õâ¸öÊôÐԾͲ»×ö¹ý¶àµÄ½âÊÍ¡£½ÓÏÂÀ´¼ÌÐø½éÉÜÆäËûµÄÊôÐÔ¡£
flex-grow ºÍ flex-shrink
FlexÏîÄ¿×îÓÅÐãµÄÒ»µã¾ÍÊÇÁé»îÐÔ¡£flex-growºÍflex-shrinkÊôÐÔÔÊÐíÎÒÃÇÍæÕâ¸öÁé»îÐÔ¡£
flex-growºÍflex-shrinkÊôÐÔ¿ØÖÆFlexÏîÄ¿ÔÚÈÝÆ÷ÓжàÓàµÄ¿Õ¼äÈçºÎ·Å´ó£¨À©Õ¹£©£¬ÔÚûÓжîÍâ¿Õ¼äÓÖÈçºÎËõС¡£
ËûÃÇ¿ÉÄܽÓÊÜ0»òÕß´óÓÚ0µÄÈκÎÕýÊý¡£0 || positive number¡£
½ÓÏÂÀ´²ûÊöËüÃǵÄʹÓá£Ê¹ÓÃÒ»¸ö¼òµ¥µÄÎÞÐòÁбí×öΪÀý×Ó£¬ËüÖ»°üº¬Ò»¸öÁбíÏî¡£
<ul>
<li>I am a simple list</li>
</ul>
ul {
display: flex;
} |
Ìí¼Ó¸ü¶àµÄÑùʽ£¬¿´ÆðÀ´ÏñÕâÑù£º

ĬÈÏÇé¿öÏ£¬flex-growÊôÐÔÖµÉèÖÃΪ0¡£±íʾFlexÏîÄ¿²»»áÔö³¤£¬Ìî³äFlexÈÝÆ÷¿ÉÓÿռ䡣ȡֵΪ0¾ÍÊÇÒ»¸ö¿ªºÍ¹ØµÄ°´Å¥¡£±íʾflex-grow¿ª¹ØÊǹرյġ£
Èç¹û°Ñflex-growµÄÖµÉèÖÃΪ1£¬»á·¢Éú£º

ÏÖÔÚFlexÏîÄ¿À©Õ¹ÁË£¬Õ¼¾ÝÁËFlexÈÝÆ÷ËùÓпÉÓÿռ䡣Ҳ¾ÍÊÇ˵¿ª¹Ø´ò¿ªÁË¡£Èç¹ûÄãÊÔ×ŵ÷ÕûÄãä¯ÀÀÆ÷µÄ´óС£¬FlexÏîĿҲ»áËõС£¬ÒÔÊÊÓ¦ÐÂµÄÆÁÄ»¿í¶È¡£
Ϊʲô£¿Ä¬ÈÏÇé¿öÏ£¬flex-shrinkµÄÖµÊÇ1£¬Ò²¾ÍÊÇ˵flex-shrink¿ª¹ØÒ²ÊÇ´ò¿ªµÄ¡£
¿ÉÒÔ×Ðϸ¿´¿´flex-growºÍflex-shrinkÊôÐÔÔÚ¸÷ÖÖÇé¿öϵÄЧ¹û£¬ÕâÑùÄܸüºÃµÄ°ïÖúÄãÀí½â¡£
flex-basis
¼ÇµÃÇ°ÃæÎÒ˵¹ý£¬FlexÏîÄ¿Êǵ±ÎÒûÓеġ£µ«ÎÒÃÇÒ²¿ÉÒÔ¿ØÖÆ¡£
flex-basisÊôÐÔ¿ÉÒÔÖ¸¶¨FlexÏîÄ¿µÄ³õʼ´óС¡£Ò²¾ÍÊÇflex-growºÍflex-shrinkÊôÐÔµ÷ÕûËüµÄ´óСÒÔÊÊÓ¦FlexÈÝÆ÷֮ǰ¡£
Ç°Ãæ½éÉܵÄÊǷdz£ÉúÒªµÄ£¬ËùÒÔÎÒÃÇÐèÒª»¨Ò»µãʱ¼äÀ´¼ÓÇ¿¶ÔËûÃǵÄÀí½â¡£
flex-basisĬÈϵÄÖµÊÇauto¡£flex-basis¿ÉÒÔÈ¡ÈκÎÓÃÓÚwidthÊôÐÔµÄÈκÎÖµ¡£±ÈÈç % || em || rem || pxµÈ¡£
×¢Ò⣺Èç¹ûflex-basisÊôÐÔµÄÖµÊÇ0ʱ£¬Ò²ÐèҪʹÓõ¥Î»¡£¼´flex-basis: 0px²»ÄÜд³Éflex-basis:0¡£
ÕâÀïͬÑùʹÓÃÖ»ÓÐÒ»¸öÁбíÏîµÄÁбí×öΪʾÀý¡£
<ul>
<li>I am a simple list</li>
</ul>
ul {
display: flex
}
li {
padding: 4px; /*some breathing space*/
} |
ĬÈÏÇé¿ö£¬FlexÏîÄ¿µÄ³õʼ¿í¶ÈÓÉflex-basisµÄĬÈÏÖµ¾ö¶¨£¬¼´£ºflex-basis: auto¡£FlexÏîÄ¿¿í¶ÈµÄ¼ÆËãÊÇ»ùÓÚÄÚÈݵĶàÉÙÀ´×Ô¶¯¼ÆË㣨ºÜÃ÷ÏÔ£¬¼ÓÉÏÁËpaddingÖµ£©¡£

ÕâÒâζ×Å£¬Èç¹ûÄãÔö¼ÓFlexÏîÄ¿ÖеÄÄÚÈÝ£¬Ëü¿ÉÒÔ×Ô¶¯µ÷Õû´óС¡£
<ul>
<li>I am a simple list AND I am a simple list</li>
</ul> |

È»¶ø£¬Èç¹ûÄãÏ뽫FlexÏîÄ¿ÉèÖÃÒ»¸ö¹Ì¶¨µÄ¿í¶È£¬ÄãÒ²¿ÉÒÔÕâÑù×ö£º
li {
flex-basis: 150px;
} |
ÏÖÔÚFlexÏîÄ¿µÄ¿í¶ÈÊܵ½ÁËÏÞÖÆ£¬ËüµÄ¿í¶ÈÊÇ150px¡£

Ëü±äµÃ¸ü¼ÓÓÐȤ¡£
flexËÙ¼Ç
flexÊÇflex-grow¡¢flex-shrinkºÍflex-basisÈý¸öÊôÐÔµÄËټǣ¨¼òд£©¡£
ÔÚÊʵ±µÄʱºò£¬ÎÒ½¨ÒéÄãʹÓÃflex£¬ÕâÑù±ÈʹÓÃÈý¸öÊôÐÔ·½±ã¡£
ÉÏÃæµÄ´úÂëÏ൱ÓÚ£º
li {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
} |
×¢ÒâËüÃÇÖ®¼äµÄ˳Ðò¡£flex-growµÚÒ»£¬È»ºóÊÇflex-shrink£¬×îºóÊÇflex-basis¡£Ëõд³ÉGSB£¬¿ÉÒÔ°ïÖúÄã¸üºÃµÄ¼ÇÒä¡£
Èç¹ûflexÊôÐÔÖµÖÐÉÙÒ»¸öÖµ£¬»á·¢ÉúÊ²Ã´ÄØ£¿
Èç¹ûÄãÖ»ÉèÖÃÁËflex-growºÍflex-shrinkÖµ£¬flex-basis¿ÉÄÜÊÇĬÈÏÖµ0¡£Õâ¾ÍÊÇËùνµÄ¾ø¶ÔflexÏîÄ¿¡£Ö»Óе±ÄãÉèÖÃÁËflex-basis£¬Äã»áµÃµ½Ò»¸öÏà¶ÔflexÏîÄ¿¡£
/* ÕâÊÇÒ»¸ö¾ø¶ÔµÄFlexÏîÄ¿ */
li {
flex: 1 1; /*flex-basis ĬÈÏֵΪ 0*/
}
/* ÕâÊÇÒ»¸öÏà¶ÔµÄFlexÏîÄ¿ */
li {
flex-basis: 200px; /* Ö»ÉèÖÃÁËflex-basisµÄÖµ */
} |
ÎÒÖªµÀÄãÔÚÏëʲô¡£Äã¿Ï¶¨ÏëÖªµÀÏà¶ÔºÍ¾ø¶ÔµÄFlexÏîÄ¿ÊÇʲô£¿ÎÒ½«ÔÚºóÃæ»Ø´ðÕâ¸öÎÊÌâ¡£ÄãÖ»ÐèÒªÔÙ´ÎäĿÐÅÈξÍ×ã¹»ÁË¡£
ÈÃÎÒÃÇ¿´¿´Ò»Ð©·Ç³£ÓÐÓõÄflexÖµ¡£
flex: 0 1 auto
ÕâÏ൱ÓÚдÁËflexĬÈÏÊôÐÔÖµÒÔ¼°ËùÓеÄFlexÏîÄ¿¶¼ÊÇĬÈÏÐÐΪ¡£

ºÜÈÝÒ×Àí½âÕâÒ»µã£¬Ê×ÏÈ¿´¿´flex-basisÊôÐÔ¡£flex-basisÉèÖÃΪauto£¬ÕâÒâζ×ÅFlexÏîÄ¿µÄ³õʼ¿í¶È¼ÆËãÊÇ»ùÓÚÄÚÈݵĴóС¡£
Ã÷°×ÁË£¿
°Ñ×¢ÒâÁ¦·Åµ½ÏÂÒ»¸öÊôÐÔ£¬flex-growÉèÖÃΪ0¡£ÕâÒâζ×Åflex-grow²»»á¸Ä±äFlexÏîÄ¿µÄ³õʼ¿í¶È¡£Ò²¾ÍÊÇ˵£¬flex-growµÄ¿ª¹ØÊǹرյġ£
flex-grow¿ØÖÆFlexÏîÄ¿µÄÔö³¤£¬Èç¹ûÆäÖµÉèÖÃΪ0£¬FlexÏîÄ¿²»»á·Å´óÒÔÊÊÓ¦ÆÁÄ»£¨FlexÈÝÆ÷´óС£©¡£
×îºó£¬flex-shrinkµÄÖµÊÇ1¡£Ò²¾ÍÊÇ˵£¬FlexÏîÄ¿ÔÚ±ØÒªÊ±»áËõС¡£
Ó¦Óõ½FlexÏîĿЧ¹û¾ÍÊÇÕâÑù×Ó£º

×¢Ò⣺FlexÏîĿûÓÐÔö³¤£¨¿í¶È£©¡£Èç¹ûÓбØÒª£¬Èç¹ûµ÷Õûä¯ÀÀÆ÷(µ÷Сä¯ÀÀÆ÷¿í¶È)£¬FlexÏîÄ¿»á×Ô¶¯¼ÆËã¿í¶È¡£
flex: 0 0 auto
Õâ¸öÏ൱ÓÚflex: none¡£
»¹ÊÇÀÏ¹æ¾Ø£º¿í¶ÈÊDZ»×Ô¶¯¼ÆË㣬²»¹ýµ¯ÐÔÏîÄ¿²»»áÉìÕ¹»òÕßÊÕËõ£¨ÒòΪ¶þÕß¶¼±»ÉèÖÃΪÁ㣩¡£ÉìÕ¹ºÍÊÕËõ¿ª¹Ø¶¼±»¹ØµôÁË¡£
Ëü»ù±¾ÉÏÊÇÒ»¸ö¹Ì¶¨¿í¶ÈµÄÔªËØ£¬Æä³õʼ¿í¶ÈÊÇ»ùÓÚµ¯ÐÔÏîÄ¿ÖÐÄÚÈÝ´óС¡£
¿´¿´Õâ¸ö flex ¼òдÊÇÈçºÎÓ°ÏìÁ½¸öµ¯ÐÔÏîÄ¿µÄ¡£Ò»¸öµ¯ÐÔÏîÄ¿»á±ÈÁíÒ»¸öÈÝÄɸü¶àÄÚÈÝ¡£

Ó¦¸Ã×¢Òâµ½µÄµÚÒ»¼þÊÂÇéÊÇ£¬ÕâÁ½¸öµ¯ÐÔÏîÄ¿µÄ¿í¶ÈÊDz»Í¬µÄ¡£ÒòΪ¿í¶ÈÊÇ»ùÓÚÄÚÈÝ¿í¶È¶ø×Ô¶¯¼ÆËãµÄ£¬ËùÒÔÕâÊÇÔ¤Áϵõ½µÄ¡£
ÊÔ×ÅËõ·ÅÒ»ÏÂä¯ÀÀÆ÷£¬Äã»á×¢Òâµ½µ¯ÐÔÏîÄ¿²»»áÊÕËõÆä¿í¶È¡£ËüÃÇ´Ó¸¸ÔªËØÖÐÍ»³öÀ´ÁË£¬Òª¿´µ½ËùÓÐÄÚÈÝ£¬±ØÐëºáÏò¹ö¶¯ä¯ÀÀÆ÷¡£
²»Òª×ż±£¬ÉÔºóÎÒ»áչʾÈçºÎ´¦ÀíÕâÖÖ¹ÖÒìµÄÐÐΪ¡£

ÔÚËõ·Åä¯ÀÀÆ÷ʱ£¬µ¯ÐÔÏîÄ¿²»»áÊÕËõ£¬¶øÊÇ´Óµ¯ÐÔÈÝÆ÷ÖÐÍ»³öÀ´ÁË¡£
flex: 1 1 auto
ÕâÓë flex: auto ÏîÄ¿Ïàͬ¡£
»¹Êǰ´ÎÒÇ°ÃæÁ¢µÄ¹æ¾Ø¡£¼´£¬×Ô¶¯¼ÆËã³õʼ»¯¿í¶È£¬µ«ÊÇÈç¹ûÓбØÒª£¬»áÉìÕ¹»òÕßÊÕËõÒÔÊÊÓ¦Õû¸ö¿ÉÓÿí¶È¡£
ÉìÕ¹ºÍÊÕËõ¿ª¹Ø´ò¿ªÁË£¬¿í¶È×Ô¶¯±»¼ÆËã¡£

´Ëʱ£¬ÏîÄ¿»áÌîÂú¿ÉÓÿռ䣬ÔÚËõ·Åä¯ÀÀÆ÷ʱҲ»áËæÖ®ÊÕËõ¡£
flex: ¡°positive number¡±
ÕâÀïÕýÊý¿ÉÒÔ´ú±íÈκÎÕýÊý£¨Ã»ÓÐÒýºÅ£©¡£ÕâÓë flex: ¡°ÕýÊý¡± 1 0 Ïàͬ¡£
flex: 2 1 0 ÓëдΪ flex: 2 ÊÇÒ»ÑùµÄ£¬2±íʾÈκÎÕýÊý¡£
li {
flex: 2 1 0; / *Óë flex: 2Ïàͬ */
} |
ÓëÇ°ÃæÎÒÁ¢µÄ¹æ¾ØÒ»Ñù£¬¼´£¬½«µ¯ÐÔÏîÄ¿µÄ³õʼ¿í¶ÈÉèÖÃΪÁ㣨àÅ£¿Ã»Óпí¶È£¿£©£¬ÉìÕ¹ÏîÄ¿ÒÔÌîÂú¿ÉÓÿռ䣬²¢ÇÒ×îºóÖ»ÒªÓпÉÄܾÍÊÕËõÏîÄ¿¡£
µ¯ÐÔÏîĿûÓпí¶È£¬ÄÇô¿í¶È¸ÃÈçºÎ¼ÆËãÄØ£¿
Õâ¸öʱºò flex-grow Öµ¾ÍÆð×÷ÓÃÁË£¬Ëü¾ö¶¨µ¯ÐÔÏîÄ¿±ä¿íµÄ³Ì¶È¡£ÓÉËüÀ´¸ºÔðûÓпí¶ÈµÄÎÊÌâ¡£
µ±Óжà¸öµ¯ÐÔÏîÄ¿£¬²¢ÇÒÆä³õʼ¿í¶È flex-basis ±»ÉèÖÃΪ»ùÓÚÁãµÄÈκÎֵʱ£¬±ÈÈç 0px£¬Ê¹ÓÃÕâÖÖ flex ¼òд¸üʵÓá£
ʵ¼Ê·¢ÉúµÄÊÇ£¬µ¯ÐÔÏîÄ¿µÄ¿í¶È±»¸ù¾Ý flex-grow ÖµµÄ±ÈÀýÀ´¼ÆËã¡£
¿¼ÂÇÈçÏÂÁ½¸öÁбíÏî±ê¼Ç¼° CSS£º
<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>
ul {
display: flex;
}
/* µÚÒ»¸öµ¯ÐÔÏîÄ¿ */
li:nth-child(1) {
flex: 2 1 0; /* Óëд³É flex: 2 Ïàͬ*/
}
/* µÚ¶þ¸öµ¯ÐÔÏîÄ¿ */
li:nth-child(2){
flex: 1 1 0;
background-color: #8cacea;
} |
¼ÇסÉèÖà flex-grow : 1£¬»áÈõ¯ÐÔÏîÄ¿ÌîÂú¿ÉÓÿռ䡣ÉìÕ¹¿ª¹Ø´ò¿ªÁË¡£
ÕâÀïÓÐÁ½¸öµ¯ÐÔÏîÄ¿¡£Ò»¸öµÄ flex-grow ÊôÐÔÖµÊÇ 1£¬ÁíÒ»¸öÊÇ 2£¬ÄÇô»á³öÏÖɶÇé¿öÄØ£¿
Á½¸öÏîÄ¿ÉϵÄÉìÕ¹¿ª¹Ø¶¼´ò¿ªÁË¡£²»¹ý£¬ÉìÕ¹¶ÈÊDz»Í¬µÄ£¬1 ºÍ 2¡£
¶þÕß¶¼»áÌîÂú¿ÉÓÿռ䣬²»¹ýÊǰ´±ÈÀýµÄ¡£
ËüÊÇÕâÑù¹¤×÷µÄ£ºÇ°Ò»¸öÕ¼ 1/3 µÄ¿ÉÓÿռ䣬ºóÒ»¸öÕ¼ 2/3 µÄ¿ÉÓÿռ䡣
ÖªµÀÊÇÎÒÔõôµÃµ½Õâ½á¹ûµÄô£¿
ÊǸù¾Ý»ù±¾µÄÊýѧ±ÈÀý¡£¡±µ¥Ïî±ÈÀý / ×ܱÈÀý¡±£¬ÎÒÏ£ÍûÄãûÓЩ¹ýÕâЩÊýѧ¿Î¡£

¿´µ½³öÏÖɶÇé¿öÁËô£¿
¼´Ê¹Á½¸öµ¯ÐÔÏîÄ¿ÄÚÈÝÒ»Ñù´ó£¨½üËÆ£©£¬ËüÃÇËùÕ¼¿Õ¼ä»¹ÊDz»Í¬¡£¿í¶È²»ÊÇ»ùÓÚÄÚÈݵĴóС£¬¶øÊÇÉìÕ¹Öµ¡£Ò»¸öÊÇÁíÒ»¸öµÄÔ¼Á½±¶¡£
ÓйØÓÚflex-grow¡¢flex-basisºÍflex-shrinkÖ®¼äµÄÏêϸ¼ÆË㣬¿ÉÒÔµã»÷@Chris WrightдµÄ¡¶Flexbox adventures¡·²©ÎÄ¡£ÒëÎÄ¿ÉÒÔµã»÷ÕâÀï¡£
align-self
align-self ÊôÐÔ¸ü½øÒ»²½ÈÃÎÒÃǸüºÃµØ¿ØÖƵ¯ÐÔÏîÄ¿¡£
ÄãÒѾ¿´µ½ align-items ÊôÐÔÊÇÈçºÎÓÐÖúÓÚÕûÌå¶ÔÆëµ¯ÐÔÈÝÆ÷ÄÚµÄËùÓе¯ÐÔÏîÄ¿ÁË¡£
Èç¹ûÏë¸Ä±äÒ»¸öµ¯ÐÔÏîÄ¿ÑØ×ŲàÖáµÄλÖ㬶ø²»Ó°ÏìÏàÁڵĵ¯ÐÔÏîÄ¿£¬¸ÃÔõô°ìÄØ£¿
ÕâÊÇ align-self ÊôÐÔ´óչȽŵĵط½ÁË¡£
¸ÃÊôÐÔµÄȡֵ¿ÉÒÔÊÇÕâЩֵ֮һ£ºauto || flex-start || flex-end || center || baseline || stretch¡£
li:first-of-type {
align-self: auto || flex-start || flex-end || center || baseline || stretch
} |
ÕâЩֵÄãÒѾÊìϤ¹ýÁË£¬²»¹ý×÷Ϊ»Ø¹Ë£¬ÈçÏÂÊÇËüÃÇÈçºÎÓ°ÏìÌØ¶¨Ä¿±êÏîÄ¿¡£ÕâÀïÊÇÈÝÆ÷ÄڵĵÚÒ»¸öÏîÄ¿¡£Ä¿±êµ¯ÐÔÏîÄ¿ÊǺìÉ«µÄ¡£
flex-end
flex-end½«Ä¿±êÏîÄ¿£¨FlexÏîÄ¿£©¶ÔÆëµ½Cross-AxisµÄÄ©¶Ë¡£

center
center½«Ä¿±êÏîÄ¿£¨FlexÏîÄ¿£©¶ÔÆëµ½Cross-AxisµÄÖм䡣

stretch
stretch»á½«Ä¿±êÏîÄ¿ÀÉ죬ÒÔÑØ×ÅCross-AxisÌîÂúFlexÈÝÆ÷µÄ¿ÉÓÿռ䣨FlexÏîÄ¿¸ß¶ÈºÍFlexÈÝÆ÷¸ß¶ÈÒ»Ñù£©¡£

baseline
baseline½«Ä¿±êÏîÄ¿ÑØ×Å»ùÏß¶ÔÆë¡£ËüÓëflex-startµÄЧ¹û¿´ÆðÀ´ÊÇÒ»ÑùµÄ£¬²»¹ýÎÒÏàÐÅÄãÀí½âÁË»ùÏßÊÇʲô¡£ÒòÎªÇ°ÃæÒѾ½âÊ͹ý¡£

auto
auto Êǽ«Ä¿±êFlexÏîÄ¿µÄÖµÉèÖÃΪ¸¸ÔªËØµÄ align-itemsÖµ£¬»òÕßÈç¹û¸ÃÔªËØÃ»Óи¸ÔªËصϰ£¬¾ÍÉèÖÃΪ stretch¡£
ÔÚÏÂÃæµÄÇé¿öÏ£¬µ¯ÐÔÈÝÆ÷µÄ align-items ֵΪ flex-start¡£Õâ»á°ÑËùÓе¯ÐÔÏîÄ¿¶¼¶ÔÆëµ½Cross-AxisµÄ¿ªÍ·¡£Ä¿±êFlexÏîÄ¿ÏÖÔڼ̳ÐÁË flex-start Öµ£¬¼´¸¸ÔªËØµÄ align-item Öµ¡£

ÈçÏÂÊÇÉÏÃæFlexÏîÄ¿µÄ»ù´¡Ñùʽ¡£ÕâÑùÄã¿ÉÒÔ¶Ô·¢ÉúµÄÊÂÇéÀí½âµÃ¸üºÃµã¡£
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: flex-start; /* Ó°ÏìËùÓе¯ÐÔÏîÄ¿ */
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
font-size: 2rem;
} |
ÏÖÔÚÄã²î²»¶àÒѾΪÓÐȤµÄ²¿·Ö×öºÃ×¼±¸ÁË
¾ø¶ÔºÍÏà¶ÔFlexÏîÄ¿

Ç°ÃæÁ˽âÁËһЩ»ù±¾¸ÅÄµ«ÖØÒªµÄÊÇÒª³ÎÇåÒ»Ð©ÖØÒªµÄ¸ÅÄî¡£ÄǾø¶ÔºÍÏà¶ÔFlexÏîĿ֮¼äµ½µ×ÓÐÉ¶Çø±ðÄØ£¿¶þÕßÖ®¼äÖ÷ÒªµÄÇø±ðÔÚÓÚ¼ä¾à¼°ÈçºÎ¼ÆËã¼ä¾à¡£
Ò»¸öÏà¶ÔFlexÏîÄ¿Äڵļä¾àÊǸù¾ÝËüµÄÄÚÈÝ´óСÀ´¼ÆËãµÄ¡£¶øÔÚ¾ø¶ÔFlexÏîÄ¿ÖУ¬Ö»¸ù¾Ý flex ÊôÐÔÀ´¼ÆË㣬¶ø²»ÊÇÄÚÈÝ¡£
¿¼ÂÇÈçϵıê¼Ç£º
<ul>
<li>
This is just some random text to buttress the point being explained.
Some more random text to buttress the point being explained.
</li>
<li>This is just a shorter random text.</li>
</ul> |
Á½¸öÁбíÏîÔªËØ£¬Ò»¸ö±ÈÁíÒ»¸öµÄÎı¾¶àµÃ¶à¡£
¼ÓµãÑùʽ£º
ul {
display: flex; /*´¥·¢µ¯ÐÔºÐ*/
}
li {
flex: auto; /*¼ÇסÕâÓë flex: 1 1 auto; Ïàͬ*/
border: 2px solid red;
margin: 2em;
} |
ÈçÏÂÊǽá¹û£º

Èç¹ûÄãÒѾÍüÁ˵ϰ£¬flex: 1 1 auto ÊÇÓë flex-grow: 1¡¢flex-shrink: 1 ºÍ flex-basis: auto ÏàͬµÄ¡£
FlexÏîÄ¿µÄ³õʼ¿í¶ÈÊDZ»×Ô¶¯¼ÆËãµÄ£¨flex-basis: auto£©£¬È»ºó»áÉìÕ¹ÒÔÊÊÓ¦¿ÉÓÿռ䣨flex-grow: 1£©¡£
µ±FlexÏîÄ¿ÒòΪ±»ÉèÖÃΪ flex-basis: auto£¬¶øµ¼Ö¿í¶È±»×Ô¶¯¼ÆËãʱ£¬ÊÇ»ùÓÚFlexÏîÄ¿ÄÚ°üº¬µÄÄÚÈݵĴóС¶ø¼ÆËã¡£
ÉÏÃæÊ¾ÀýÖÐFlexÏîÄ¿µÄÄÚÈÝ´óС²»Ïàͬ¡£Òò´Ë£¬FlexÏîÄ¿µÄ´óС¾Í»á²»ÏàµÈ¡£
¼ÈÈ»¸÷¸ö¿í¶È¿ªÊ¼¾Í²»ÊÇÏàµÈµÄ£¨ËüÊÇ»ùÓÚÄÚÈݵģ©£¬ÄÇôµ±ÏîÄ¿Éìչʱ£¬¿í¶ÈÒ²±£³Ö²»ÏàµÈ¡£

ÉÏÃæÊ¾ÀýÖеÄFlexÏîÄ¿ÊÇÏà¶ÔFlexÏîÄ¿¡£
ÏÂÃæÎÒÃǰÑFlexÏîÄ¿±ä³É¾ø¶ÔµÄ, ¾ÍÊÇ˵Õâ´ÎËüÃǵĿí¶ÈÊÇ»ùÓÚ flexÊôÐÔ£¬¶ø²»ÊÇÄÚÈݵĴóС¡£Ò»ÐдúÂë¾Í¿ÉÒÔ³öÆæ¼£¡£
li {
flex: 1 ; /*Óë flex: 1 1 0 Ïàͬ*/
} |
Ч¹ûÈçÏ£º

Õâ´Î¿´µ½Á½¸öFlexÏîÄ¿µÄ¿í¶ÈÏàͬÁËÂð£¿
FlexÏîÄ¿µÄ³õʼ¿í¶ÈÊÇÁ㣨flex-basis: 0£©£¬²¢ÇÒËüÃÇ»áÉìÕ¹ÒÔÊÊÓ¦¿ÉÓÿռ䡣µ±ÓÐÁ½µ½¶à¸öFlexÏîÄ¿µÄ flex-basis ȡֵΪ0ʱ£¬ËüÃÇ»á»ùÓÚ flex-growÖµ¹²Ïí¿ÉÓÿռ䡣
Õâ¸ö֮ǰ¾ÍÌÖÂÛ¹ýÁË¡£ÏÖÔÚ¿í¶È²»»á»ùÓÚÄÚÈÝ´óС¶ø¼ÆË㣬¶øÊÇ»ùÓÚÖ¸¶¨µÄ flex ÊôÐÔÖµÀ´¼ÆËã¡£ÕâÑùÄã¾ÍÃ÷°×Á˰ɡ£¶Ôô£¿
¾ø¶ÔFlexÏîÄ¿µÄ¿í¶ÈÖ»»ùÓÚ flex ÊôÐÔ£¬¶øÏà¶ÔFlexÏîÄ¿µÄ¿í¶È»ùÓÚÄÚÈÝ´óС¡£
Auto-margin ¶ÔÆë

µ±ÐÄFlexÏîÄ¿É쵀 margin: auto ¶ÔÆë¡£µ±ÔÚFlexÏîÄ¿ÉÏʹÓà margin: auto ʱ£¬ÊÂÇé¿´ÆðÀ´¾ÍºÜ¹ÖÒìÁË¡£
ÄãÐèÒªÀí½â»á·¢Éúʲô¡£Ëü»áµ¼Ö²»¿ÉÔ¤ÁϵĽá¹û£¬²»¹ýÎÒ´òËã½âÊͽâÊÍ¡£
µ±ÔÚFlexÏîÄ¿ÉÏʹÓà margin: auto ʱ£¬ÖµÎª auto µÄ·½Ïò£¨×ó¡¢ÓÒ»òÕß¶þÕß¶¼ÊÇ£©»áÕ¼¾ÝËùÓÐÊ£Óà¿Õ¼ä¡£
ÕâÍæÒâÓеãÄÑÀí½â¡£ÏÂÃæÎÒÀ´ËµÃ÷һϡ£
¿¼ÂÇÈçϵĵ¼º½À¸±ê¼ÇÒÔ¼° CSS Ñùʽ£º
<ul>
<li>Branding</li>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
ul {
display: flex;
}
li {
flex: 0 0 auto;
} |
Äã¿ÉÒÔ¿´µ½ÈçϵÄЧ¹û£º

ÕâÀïÓм¸¼þÊÂÇéҪעÒ⣺
flex-grow ֵΪÉèÖÃΪ0¡£Õâ¾Í½âÊÍÁËΪʲôÁбíÏî²»»áÉìÕ¹¡£
FlexÏîÄ¿ÏòMain-AxisµÄ¿ªÍ·¶ÔÆë£¨ÕâÊÇĬÈÏÐÐΪ£©¡£
ÓÉÓÚÏîÄ¿±»¶ÔÆëµ½Main-Axis¿ªÍ·£¬Óұ߾ÍÓÐһЩ¶àÓàµÄ¿Õ¼ä¡£¿´µ½Á˰ɣ¿

ÏÖÔÚÔÚµÚÒ»¸öÁбíÏbranding£©ÉÏʹÓà margin: auto£¬¿´¿´»á³öɶÇé¿ö¡£
li:nth-child(1) {
margin-right: auto; /*Ö»Ó¦Óõ½ÓÒÍâ±ß¾à*/
} |

¸Õ¸Õ·¢ÉúÁËʲô£¿Ö®Ç°µÄÊ£Óà¿Õ¼äÏÖÔÚÒѾ±»·ÖÅäµ½µÚÒ»¸öFlexÏîÄ¿µÄÓÒ±ßÁË¡£

»¹¼ÇµÃÎÒÇ°ÃæËµµÄ»°°É£¿µ±ÔÚFlexÏîÄ¿ÉÏʹÓà margin: auto ʱ£¬ÖµÎª auto µÄ·½Ïò£¨×ó¡¢ÓÒ»òÕß¶þÕß¶¼ÊÇ£©»áÕ¼¾ÝËùÓÐÊ£Óà¿Õ¼ä¡£
Èç¹ûÏëÈÃÒ»¸öFlexÏîÄ¿µÄÁ½±ß¶¼ÓÃ×Ô¶¯Íâ±ß¾à¶ÔÆë£¬¸ÃÔõô°ìÄØ£¿
/* Èç¹ûÔ¸ÒâµÄ»°£¬Ò²¿ÉÒÔÓà margin ¼òдÀ´ÉèÖÃÁ½¸ö±ß */
li:nth-child(1) {
margin-left: auto;
margin-right: auto
} |

ÏÖÔÚ¿Õ°×±»·ÖÅäµ½FlexÏîÄ¿µÄÁ½±ßÁË¡£
ÄÇô£¬ÕâÊDz»ÊǶԺܿáµÄ×Ô¶¯Íâ±ß¾à¶ÔÆëµÄÒ»ÖÖÕÛÖÔ·½°¸ÄØ£¿¿´ÆðÀ´ÊÇ¡£Èç¹ûûעÒâµÄ»°£¬ËüÒ²¿ÉÄÜÊÇÊÜ´ìÖ®Ô´¡£µ±ÔÚÒ»¸öFlexÏîÄ¿ÉÏʹÓÃ×Ô¶¯Íâ±ß¾à£¨margin: auto£©Ê±£¬justify-content ÊôÐԾͲ»Æð×÷ÓÃÁË¡£
ÀýÈ磬ÔÚÉÏÃæµÄFlexÈÝÆ÷ÉÏͨ¹ý justify-contentÊôÐÔ£¬ÉèÖò»Í¬µÄ¶ÔÆëÑ¡Ïîʱ£¬¶Ô²¼¾ÖûÓÐÓ°Ïì¡£
ul {
justify-content: flex-end;
} |

Flexboxʵս
µ¼º½ÏµÍ³ÊÇÿ¸öÍøÕ¾»òÕßÓ¦ÓóÌÐòµÄÖØÒª×é³É²¿·Ö¡£Õâ¸öÊÀ½çÉϵÄÿ¸öÍøÕ¾¶¼»áÓÐijÖÖµ¼º½ÏµÍ³¡£
ÏÂÃæÎÒÃÇ¿´¿´ÕâЩÈÈÃÅÍøÕ¾£¬ÒÔ¼°ËüÃÇÊÇÈçºÎʵÏÖÆäµ¼º½ÏµÍ³µÄ¡£Äã¿´µ½FlexboxÊÇÈçºÎ°ïÖúÄã¸ü¸ßЧµØ´´½¨ÕâЩ²¼¾ÖÂð£¿
Ò²×Ðϸ¿´¿´ÄÄÀï»áÓõÃÉÏ×Ô¶¯Íâ±ß¾àÌØÐÔ¡£
Bootstrapµ¼º½

AirBnB PC¶Ëµ¼º½

Twitter PC¶Ëµ¼º½

½¨ÒéÄã×Ô¼ºÐ´´úÂë¡£ÊÔ×Å×Ô¼ºÊµÏÖÕâЩµ¼º½ÏµÍ³¡£ÏÖÔÚÄãÒÑ¾ÕÆÎÕÁËËùÐèµÄËùÓÐ֪ʶ¡£ÄãËùÐèÒªµÄÊÇÒ»µãÓÂÆøÈ¥¿ªÊ¼Ð´¡£
ÏÂÒ»½ÚÔÙ¼û¡£µ«Ô¸ÔÚÄãÒѾÍê³ÉÁ˵¼º½ÏµÍ³Á·Ï°Ö®ºó¡£
Çл»flex-direction»á·¢Éúʲô£¿
ÌáÐÑһϣº½«»áÓÐÒ»Ð©Ææ¹ÖµÄ¶«¶«³öÏÖ¡£

ÔÚÈëÊÖѧϰFlexboxʱ£¬Õâ¸ö²¿·ÖÊÇ×îÄÕ»ðµÄ¡£ÎÒ¹À¼ÆºÜ¶àµ¯ÐÔÊÀ½çµÄÐÂÊÖÒ²»á·¢ÏÖÈç´Ë¡£
»¹¼ÇµÃÎÒ˵¹ýĬÈϵÄMain-Axis·½ÏòÊÇ´Ó×óµ½ÓÒ£¬Cross-Axis·½ÏòÊÇ´ÓÉϵ½Ï°ɣ¿

ºÃ°É£¬ÏÖÔÚÄãÒ²¿ÉÒԸıäÕâ¸ö·½Ïò¡£
ÕýÈçÔÚ½ÏÔçµÄС½ÚÖÐËùÃèÊöµÄÄÇÑù£¬Óà flex-direction: column ʱ£¬È·ÊµÊÇÕâÑù¡£
µ±Óà flex-direction: column ʱ£¬Main-AxisºÍCross-Axis»áÏòÈçÏÂËù¿´µ½µÄÄÇÑù¸Ä±ä£º

Èç¹ûÔøÓÃÓ¢Óïд¹ýÎÄ×Ö£¬ÄÇôÄã¾ÍÖªµÀÓ¢ÓïÊÇ´Ó×óµ½ÓÒ£¬´ÓÉϵ½ÏÂÀ´Ð´µÄ¡£
FlexboxµÄĬÈÏMain-AxisºÍCross-AxisÒ²ÊDzÉÓÃͬÑùµÄ·½Ïò¡£
²»¹ý£¬Èç¹û½« flex-direction Çл»Îª column£¬Ëü¾Í²»ÔÙ×ñÑÓ¢ÓïµÄ·¶Ê½£¬¶øÊÇÈÕÓïµÄ·¶Ê½£¡
Êǵģ¬ÈÕÓï¡£
Èç¹ûÄãÓÃÈÕÓïд¹ýÎÄ×Ö£¬ÄÇôӦ¸ÃºÜÊìϤÁË¡££¨Ö£ÖØÉùÃ÷£¬ÎÒ´ÓûÓùýÈÕÓïд¹ýÎÄ×Ö£©¡£
ÈÕÎÄͨ³£ÊÇ´ÓÉϵ½ÏÂдµÄ£¡Ã»ÄÇô¹Ö£¬¶Ô°É£¿
Õâ¾Í½âÊÍÁËΪÂïÕâ¶ÔÓ¢Óïд×÷Õß¿ÉÄÜÓеãÄÕ»ð¡£

¿´¿´ÏÂÃæÕâ¸öÀý×Ó¡£±ê×¼ÎÞÐòÁбí(ul)£¬´øÓÐ 3 ¸öÁбíÏî(li)¡£²»¹ýÕâ´ÎÎÒÒª¸Ä±äÒ»ÏÂflex-direction¡£
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul {
display: flex;
flex-direction: column;
} |
ÈçÏÂÊÇ·½Ïò±ä»¯Ö®Ç°µÄÑù×Ó£º

ÈçÏÂÊÇ·½Ïò±ä»¯Ö®ºóµÄÑù×Ó£º

³öɶÊÂÁË£¿
ÏÖÔÚÎÄ×ÖÊÇÒÔÈÕÓï·ç¸ñдµÄ£ºÑØMain-Axis´ÓÉϵ½Ï¡£
ÎÒºÜÀÖÒâÖ¸³ö£¬Äã»á·¢ÏÖһЩÓÐȤµÄÊÂÇé¡£
Äã»á¿´µ½ÏîÄ¿µÄ¿í¶ÈÌîÂúÁ˿ռ䣬¶Ô°É£¿
Èç¹ûÔÚ֮ǰҪ±ä³ÉÕâÑù×Ó£¬µÃ´¦Àí flex-basis ÒÔ¼° flex-grow ÊôÐÔ¡£
ÏÂÃæÀ´¿´¿´ÕâЩ»áÈçºÎÓ°ÏìеIJ¼¾Ö¡£
li {
flex-basis: 100px;
} |
ÏÂÃæÊÇÄã»áµÃµ½µÄ¡£

ʲô£¿¸ß¶ÈÊDZ»Ó°ÏìÁË£¬µ«ÊÇ¿í¶ÈûÓа¡£¿ÎÒ֮ǰ˵¹ý£¬flex-basis ÊôÐÔ¶¨Òåÿ¸öFlexÏîÄ¿µÄ³õʼ¿í¶È¡£
ÎÒÊÇ´íµÄ£¬»òÕßÕâÑù˵¸üºÃ£ºÎÒÊÇÓÃÓ¢ÓïÀ´Ë¼¿¼¡£ÏÂÃæÎÒÃǹÃÇÒÇл»µ½ÓÃÈÕÓï˼¿¼¡£²¢ÇÒ×ÜÊǵÃÓпí¶È¡£
ÔÚÇл» flex-direction ʱ£¬Çë×¢Ò⣬ӰÏìMain-AxisµÄÿһ¸öÊôÐÔÏÖÔÚ»áÓ°ÏìÐÂMain-Axis¡£Ïñ flex-basis ÕâÖÖ»áÓ°ÏìMain-AxisÉÏFlexÏîÄ¿¿í¶ÈµÄÊôÐÔ£¬ÏÖÔÚ»áÓ°ÏìÏîÄ¿µÄ¸ß¶È£¬¶ø²»ÊÇ¿í¶È¡£
·½ÏòÒѾ±»Çл»ÁË£¡
ËùÒÔ£¬¼´Ê¹ÄãʹÓà flex-grow ÊôÐÔ£¬ËüÒ²ÊÇÓ°Ïì¸ß¶È¡£±¾ÖÊÉÏ£¬Ã¿¸ö×÷ÓÃÓÚºáÏòÖᣨ¼´Main-Axis£©É쵀 flex ÊôÐÔ£¬ÏÖÔÚ¶¼»á×÷ÓÃÓÚ×ÝÏòÉϵÄÐÂMain-Axis¡£ËüÖ»ÊÇÔÚ·½ÏòÉϵÄÒ»¸öÇл»¡£
ÕâÀïÔÙÀ´Ò»¸öÀý×Ó¡£ÎÒ·¢ÊÄÔÚÕâ¸öÀý×ÓÖ®ºóÄã»áÓиüºÃµÄÀí½â¡£¼õÉÙ֮ǰ¿´µ½¹ýµÄFlexÏîÄ¿µÄ¿í¶È£¬ËüÃǾͲ»ÔÙÌîÂúÕû¸ö¿Õ¼äÁË£º

Èç¹ûÏë°ÑÁбíÏîÒÆµ½ÆÁÄ»Öмä¸ÃÔõô°ìÄØ£¿
ÔÚÓ¢ÓïÖУ¬ÕâÊÇÄ㵽ĿǰΪֹ´¦Àíµ¯ÐÔÈÝÆ÷µÄ·½Ê½¡£¾ÍÊÇ˵£¬ °ÑFlexÏîÄ¿ÒÆµ½Main-AxisµÄÖÐ¼ä ¡£
ËùÒÔ£¬Äã»áÓà justify-content: center¡£µ«ÊÇÕâÑù×ö²»Æð×÷Óá£ÒòΪ·½Ïò±äÁË£¬ÖÐÐÄÊÇÑØ×ÅCross-Axis£¬¶ø²»ÊÇMain-Axis¡£
ÔÙÀ´¿´¿´£º

ËùÒÔÇëÓÃÈÕÓïÎÄ×ÖÀ´Ë¼¿¼¡£Main-AxisÊÇ´ÓÉϵ½Ï£¬Äã²»ÐèÒªÕâÑù¡£Cross-AxisÊÇ´Ó×óµ½ÓÒ¡£Ã²ËÆÊÇÄãËùÒªµÄ¡£
ÄãÐèÒª °ÑFlexÏîÄ¿ÒÆµ½Cross-AxisµÄÖÐ¼ä ¡£ÕâÀïÏëÆðÄĸöFlexÈÝÆ÷ÊôÐÔÁËô£¿
Êǵģ¬align-items ÊôÐÔ¡£align-items ÊôÐÔ´¦ÀíCross-AxisÉÏµÄ¶ÔÆë¡£
ËùÒÔÒª°ÑÕâЩÏîÄ¿ÒÆµ½Öм䣬µÃÕâÑù×ö£º
li {
align-items: center;
} |
ÇÆÇÆ£¡FlexÏîÄ¿ÒѾ¾ÓÖÐÁ˰ɡ£

ÊÇÓеãÐüºõ£¬ÎÒÖªµÀ¡£Èç¹ûÐèÒª£¬¾ÍÔÙ¸´Ï°Ò»±éºÃÁË¡£ÔÚÑо¿Flexboxʱ£¬ÎÒ·¢Ïֺܶà CSS Êé¶¼ÂÔ¹ýÁËÕâÒ»²¿·Ö¡£
ÓÃÈÕÓïÎÄ×ÖÀ´Ë¼¿¼Ò»Ï»áÓкܴó°ïÖú¡£ÎÒÃÇÓбØÒªÁ˽⣬ËùÓÐFlexboxÊôÐÔ¶¼ÊÇ»ùÓÚºÏÊ浀 flex-direction Æð×÷Óá£
ÏàÐÅÄãÓÖѧµ½ÁËÒ»µãж«Î÷¡£ÎҺܿªÐĽâÊÍÕâЩ£¬Ï£ÍûÄãÒ²ºÜ¿ªÐÄ¡£
ÎÒµÄÌìÀ²£¬µ¯ÐԺнâ¾öÁËÄÇÎÊÌâÁË£¿

ºÜ¶àÉè¼ÆÊ¦Óà CSS ʱÓöµ½µÄһЩµäÐÍÎÊÌâÒѾ±»FlexboxÇá¶øÒ×¾Ù½â¾öÁË¡£
@Philip Walton ÔÚÆä Flexbox½â¾öÁ˵ÄÎÊÌâÕâ¸öÏîÄ¿ ÁгöÁË 6 ÖÖµäÐ͵ÄÎÊÌ⣨µ½±¾Îıàдʱ£©¡£
ËûÈ«ÃæÌÖÂÛÁË֮ǰÓà CSS µÄÏÞÖÆ£¬ÒÔ¼°Ä¿Ç°FlexboxÌṩµÄ½â¾ö·½°¸¡£½¨ÒéÔÚÍê³É±¾Îĺó¿´Ò»¿´¡£
ÔÚ½ÓÏÂÀ´µÄʵ¼ù»·½ÚÖУ¬ÔÚ¿ªÊ¼Óõ¯ÐԺд´½¨Ò»¸öÒôÀÖÓ¦Óò¼¾Öʱ£¬ÎÒ»á½âÊÍËûÌá³öµÄһЩ¸ÅÄî¡£
Flex ²»¼æÈÝä¯ÀÀÆ÷µÄ¿Ó
Èç¹ûÄã²»ÊÇÔÚÃÎÖÐд CSS µÄÄÇÒ»ÀàÈ˵ϰ£¬¾Í¿ÉÄÜÏë¿´¿´Õâ¸ö Github ²Ö¿â¡£
ÓÐЩ±ÈÎÒ´ÏÃ÷µÄÈËÔÚÕâÀïά»¤ÁËÒ»¸öFlexboxµÄ bug ÁÐ±í¼°Æä±äͨ·½·¨¡£µ±ÓÐЩÊÂÇéûÓа´Ô¤ÆÚÆð×÷ÓÃʱ£¬ÕâÊÇÎÒ¿´µÄµÚÒ»¸öµØ·½¡£ÎÒÒ²»áÔÚºóÃæµÄʵ¼ù»·½ÚÖдøÄã²È²ÈһЩÏÔÑ۵Ŀӡ£
@Philip WaltonÔçǰרÃÅдÁËһƪÓйØÓÚ½â¾öFlexbox¿çä¯ÀÀÆ÷¼æÈÝBugµÄÎÄÕ¡¶Normalizing Cross-browser Flexbox Bugs¡·£¬¶ÔÓ¦µÄÒëÎÄ¿ÉÒÔµã»÷ÕâÀïÔĶÁ¡£
Óõ¯ÐԺд´½¨Ò»¸öÒôÀÖÓ¦ÓõIJ¼¾Ö

ÔÚѧϰÍêÁË·¦Î¶ÑϽ÷µÄ»ù´¡ÖªÊ¶Ö®ºó£¬¸ÃÓÐһЩÓÐȤµÄÏîÄ¿ÁË¡£ÊÇʱºòÍæÍæÊµ¼ÊµÄÀý×Ó£¬²¢°Ñ¸Õ»ñµÃµÄFlexbox¼¼ÄÜÓÃÉÏÈ¥¡£
Ïë³öÒ»¸öºÃÏîÄ¿»¨ÁËÎҺü¸Ìì¡£ÓÉÓÚȱ·¦´´ÔìÐÔµÄÑ¡Ôñ£¬ÎÒÏë³öÁËÒ»¸öÃ¨ÍæµÄÒôÀÖÓ¦Óò¼¾Ö¡£ÎÒ³ÆËüΪ catty music ¡£
Ò²Ðíµ½ÁË 2036 Ä꣬ÎÒÃǾÍÄÜÈÃèÔÚ»ðÐÇÉϵÄij¸öµØ·½³ªÒ¡¹ö¡£ÈçÏÂÊÇÍê³ÉÁ˵IJ¼¾Ö¿´ÆðÀ´µÄÑù×Ó£¬²¢ÇÒÍêÈ«ÊÇÓÃFlexbox²¼¾ÖµÄ¡£

¿ÉÒÔÔÚÏßÉÏ¿´£¬ÔÚÕâÀï¡£
Èç¹ûÔÚÒÆ¶¯É豸ÉÏ¿´£¬Íâ¹Û»áÉÔ΢Óе㲻ͬ¡£ÕâÊÇÔÚ±¾ÎÄÏìӦʽÉè¼ÆÒ»½ÚÖÐÒª½â¾öµÄÎÊÌâ¡£
²»¹ý£¬ÓмþÊÂÎÒµÃ̹°×¡£ÎÒÒѾ×öÁËÐí¶àÈËÈÏΪÊÇ´íÎóµÄÊÂÇé¡£ÎÒÍêÈ«ÓÃFlexbox´´½¨Õû¸ö²¼¾Ö¡£
³öÓÚ¶àÖÖÀíÓÉ£¬ÕâÑù×ö¿ÉÄܲ¢·ÇÄÇôÀíÏë¡£µ«ÊÇÔÚÕâÖÖÇé¿öÏÂÊǹÊÒâµÄ¡£ÎÒÖ»ÊÇÏëÓÃÒ»¸öÏîÄ¿£¬ÏòÄãչʾËùÓпÉÒÔÓÃFlexbox×öµÄÊÂÇé¡£
Èç¹ûÄãºÃÆæÊ²Ã´Ê±ºòʹÓÃFlexboxÊǶԵģ¬Ê²Ã´Ê±ºòÊÇ´íµÄ£¬ÄÇÄã¿ÉÒÔ¶Á¶ÁÎÒдµÄһƪÎÄÕ¡£
Flexbox ºÜ°ô£¬²»¹ýËüÔÚÕâÀï²»ÊÜ»¶Ó Flexbox ÎãÓ¹ÖÃÒÉÊÇÎÒÃÇ´ó¶àÊýÈËÓöµ½µÄ×îºÃµÄ¶«Î÷£¨Èç¹ûÄãд CSS µÄ»°£©£¬²»¹ýËüÊDz»ÊÇÊʺÏËùÓÐÇé¿öÄØ¡
ÕâÀÎÒÐÄÀïµÄʯͷÖÕÓÚÂ䵨ÁË¡£ÏÖÔÚÎÒÏàÐÅÔÚ¶ÁÍêÕâ¸öÖ®ºó£¬Ã»ÈË»á¶ÔÎÒ´óºôС½ÐÁË¡£
Catty Musci ÖеÄÒ»Çж¼ÊÇÓÃFlexbox²¼¾Ö£¬ ÕâÊǹÊÒ⾡¿ÉÄܵØìż¼¡£
ËùÒÔÏÂÃæÎÒÃÇ¿ªÊ¼°ÑÕâ¸öÍæÒ⽨³É£¡¶ÔÓÚÈκÎÉÔ΢ºÏÀíÒ»µãµÄÏîÄ¿À´Ëµ£¬ÓÐµã¹æ»®¶Ô±ÜÃâЧÂʵÍÏÂÊÇÓаïÖúµÄ¡£¾ÍÈÃÎÒ´øÄã¿´¿´´´½¨ Catty Music ²¼¾ÖµÄ¹æ»®·½·¨¡£
´ÓÄÄÀ↑ʼ£¿
Ö»ÒªÓÃFlexbox´´½¨²¼¾Ö£¬¾ÍÓ¦¸Ã´ÓÕÒ³ö²¼¾ÖÖÐÄÄÒ»¸ö²¿·Ö»á×÷ΪFlexÈÝÆ÷¿ªÊ¼¡£È»ºó²Å¿ÉÒÔʹÓÃFlexboxÌṩµÄÇ¿´ó¶ÔÆëÊôÐÔ¡£
·ÖÎö
Äã¿ÉÒÔÈÃÕû¸ö°üº¬Ìå×÷ΪFlexÈÝÆ÷£¨ÏÂͼÖб»°üº¬ÔÚºìÉ«±ß¿òÄڵIJ¿·Ö£©£¬²¢°Ñ²¼¾ÖµÄÆäËü²¿·Ö·Ö³ÉFlexÏîÄ¿£¨Item 1 ºÍ Item 2£©¡£

ÕâÑù×öÍêȫ˵µÃͨ£¬Èà Item 1 °üº¬²¼¾ÖÖгýÁ˽Å×¢ÒÔÍâµÄÿ¸ö²¿·Ö¡£½Å×¢²¿·ÖÓÃÀ´°üº¬ÒôÀÖ¿ØÖư´Å¥¡£
ÄãÖªµÀFlexÏîĿҲ¿ÉÒÔ³ÉΪFlexÈÝÆ÷Âð£¿Êǵģ¬ÊÇ¿ÉÄܵģ¡
ÄãÏëǶÌ×¶àÉî¾ÍǶÌ×¶àÉ²»¹ýÀíÖǵÄ×ö·¨ÊDZ£³ÖÒ»¸öºÏÀíµÄˮƽ£©¡£ÓÚÊÇ£¬¸ù¾ÝÕâ¸öÐÂÆôʾ¾ÍÓÐÁËÕâ¸ö¡
Item 1£¨µÚÒ»¸öFlexÏîÄ¿£©Ò²¿ÉÒÔŪ³ÉÒ»¸öFlexÈÝÆ÷¡£È»ºó£¬²à±ßÀ¸£¨Item 1b£©ºÍÖ÷À¸Ä¿£¨Item 1a£©¾Í³ÉÁË Item 1 µÄFlexÏîÄ¿¡£

ÄãÒÀÈ»ÓëÎÒͬÔÚ£¬¶Ô°É£¿ÏñÕâÑù²ð·Ö²¼¾Ö£¬»á¸øÄãÒ»¸öÏ൱²»´íµÄÐÄÀíÄ£ÐÍÀ´´¦Àí¡£
ÔÚÓÃFlexbox¿ªÊ¼´´½¨¸üΪ¸´ÔӵIJ¼¾Öʱ£¬Äã»á¿´µ½ÕâÓжàÖØÒª¡£µ±È»£¬Äã²¢²»ÐèÒªÒ»¸öÏñÉÏÃæÄÇÑù¸ß´óÉϵÄͼÏñ¡£ÔÚÖ½Éϻһ¸ö¼òµ¥µÄ²Ýͼ¾Í×ã¹»ÁË¡£
¼ÇµÃÎÒ˵¹ý¿ÉÒÔÏëǶÌ×¶àÉî¾ÍǶÌ×¶àÉî°É£¿Ã²ËÆÕâÀﻹ¿ÉÒÔÔÙÀ´Ò»¸öǶÌס£
¿´¿´ÉÏÃæµÄÖ÷À¸Ä¿£¨Item 1a£©¡£ËüÒ²¿ÉÒÔ±ä³ÉÒ»¸öFlexÈÝÆ÷£¬ÒÔÈÝÄÉÈçϸßÁÁ¶ÈµÄ²¿·Ö£ºItem 1a¡ªA ºÍ Item 1a¡ªB¡£

¿ÉÄÜÄã»á¾ö¶¨²»°ÑÖ÷À¸Ä¿£¨Item 1a£©±ä³ÉFlexÈÝÆ÷£¬Ö»ÔÚÆäÄÚ²¿·ÅÈëÁ½¸ö div À´ÈÝÄɸßÁÁ¶È²¿·Ö¡£
Êǵģ¬ÕâÑù×öûÎÊÌ⣬ÒòΪ ¡°Item 1a¡ªA¡± ºÍ ¡°Item 1a¡ªB¡± ÊÇ´¹Ö±¶Ñ·ÅµÄ¡£
ĬÈÏÇé¿öÏ£¬div ÊÇ´¹Ö±¶Ñ·ÅµÄ¡£ÕâÊǺÐÄ£Ð͵Ť×÷ÔÀí¡£Èç¹ûÑ¡Ôñ°ÑÖ÷À¸Ä¿±ä³ÉÒ»¸öFlexÈÝÆ÷£¬¾ÍÓÐÁËËæÊ±¿ÉÄ㹩µ÷DzµÄÇ¿´ó¶ÔÆëÊôÐÔ¡£
FlexboxÖÐµÄ Flex ÊÇÖ¸µ¯ÐÔ¡¢Áé»î¡£FlexÈÝÆ÷ĬÈÏÊǵ¯ÐԵ쬏úÏìӦʽÓеãÀàËÆ¡£ÕâÒ²ÐíÊÇʹÓÃFlexÈÝÆ÷£¬¶ø²»ÊÇÆÕͨ div µÄÁíÒ»¸öÔÒò¡£²»¹ý£¬ÕâÈ¡¾öÓÚʵ¼ÊÇé¿ö¡£
ÔÚÄã´´½¨ Catty Music ʱÎÒ»áÂÛ¼°Ò»Ð©ÊÂÇéÊÂÇé¡£ÄãÏÖÔÚÓ¦¸Ãȥдµã´úÂëÁË¡£
HTML½á¹¹
´ÓÈçϵĻù´¡ HTML ÉèÖÿªÊ¼¡£
<!DOCTYPE html>
<html>
<head>
<title>Catty Music</title>
</head>
<body>
<main></main> <!--ÓÃÀ´°üº¬Ó¦ÓõÄÖ÷À¸Ä¿-->
<footer></footer> <!--ÓÃÀ´°üº¬ÒôÀÖ¿ØÖư´Å¥ºÍ¸èÇúϸ½Ú-->
</body>
</html> |
È»ºóΪËüÉèÖÃÑùʽ£º
html,
body {
height: 100%; /*ÏÔʽÉèÖÃÕ⣬ÊǺÜÖØÒªµÄ*/
}
body {
display: flex; /*flex ³¬ÄÜÁ¦±»¼¤»îÁË£¡ */
flex-direction: column; /*´¹Ö±¶ø²»ÊÇˮƽ¶Ñ·Åµ¯ÐÔÏîÄ¿£¨Ö÷À¸Ä¿ºÍ½Å×¢ÔªËØ£©*/
} |
ʹÓÃFlexboxµÄµÚÒ»¸ö²½Öè¾ÍÊÇÈ·¶¨Ò»¸öFlexÈÝÆ÷¡£
ÕâÕýºÃÊÇÉÏÃæ´úÂëËù×öµÄ¡£Ëü½« body ÔªËØµÄ display ÊôÐÔÉèÖÃΪ flex¡£ÏÖÔÚÓÐÁËÒ»¸öFlexÈÝÆ÷£¬¼´ body ÔªËØ¡£
FlexÏîĿҲ±»¶¨ÒåÁË£¨item 1 ºÍ item 2£©£º¸úÇ°Ãæ·ÖÎöÖÐËù×öµÄÒ»Ñù¡£
×¢Ò⣬Èç¹ûÄã¶ÔÕâ¸ö¸ÅÄÊÇÓеãÄ£ºý£¬¾ÍÓ¦¸ÃÔÙ¿´¿´ÎÒÔÚ֮ǰ¿ªÊ¼·ÖÎöʱչʾµÄͼÏñ¡£
¶¢×Å×îºóµÄͼÏñ£¬ÄãÓ¦¸ÃÈõ¯ÐÔÏîÄ¿¹¤×÷ÆðÀ´¡£
ÈýÅ×¢Îü¸½Ôڵײ¿¡£È÷ÅÒôÀÖ¿ØÖƵĽÅ×¢Îü¸½ÔÚÒ³ÃæµÄµ×²¿£¬Í¬Ê±ÈÃÖ÷À¸Ä¿ÌîÂúÊ£Óà¿Õ¼ä¡£
ÄãÔõôʵÏÖ£¿
main {
flex: 1 0 auto; /*ÌîÂúÊ£Óà¿Õ¼ä*/
} |
footer {
flex: 0 0 90px; /*²»»á·Å´ó»òÕßÊÕËõ - Ö»»á¹Ì¶¨ÔÚ 90px ¸ß¶È¡£*/
} |
Çë¿´ÉÏÃæÁгöµÄ´úÂëÖеÄ×¢ÊÍ¡£¶à¿÷ÁË flex-grow ÊôÐÔ£¬ËüÈÃÖ÷À¸Ä¿ÌîÂúÕû¸ö¿Õ¼äÏà¶ÔºÜÈÝÒס£Ö»Ð轫 flex-grow ÊôÐÔµÄÖµÉèÖÃΪ 1 ¼´¿É¡£»¹Ó¦¸Ã°Ñ flex-shrink ÊôÐÔÉèÖÃΪ 0¡£ÎªÊ²Ã´ÄØ£¿
ÒòΪ flex-direction ûÓиı䣬ËùÒÔÔÒòÒ²Ðí²»ºÜÃ÷ÏÔ¡£
ÔÚÓÐЩä¯ÀÀÆ÷ÖУ¬»áÓÐÒ»¸ö bug£¬ÔÊÐíFlexÏîÄ¿ÊÕËõºó±ÈÆäÄÚÈݳߴçС¡£ÕâÊǸöºÜ¹Å¹ÖµÄÐÐΪ¡£
½â¾öÕâ¸ö bug µÄ±äͨ·½°¸ÊÇ°Ñ flex-shrink µÄÊôÐÔÖµÉèÖÃΪ 0£¬¶ø²»ÊÇĬÈÏÖµ 1£¬Í¬Ê±£¬°Ñ flex-basis ÊôÐÔÉèÖÃΪ auto¡£
¾ÍÏñÊÇ˵£ºÇë×Ô¶¯¼ÆËãFlexÏîÄ¿µÄ´óС£¬µ«ÊDz»ÒªÊÕËõ¡£ÓÐÁËÕâ¸ö¼òдֵ£¬¾Í¿ÉÒԵõ½FlexÏîÄ¿µÄĬÈÏÐÐΪ¡£
FlexÏîÄ¿»áËæ×Åä¯ÀÀÆ÷Ëõ·ÅÄǸöÊÕËõ¡£Ëõ·Å²»ÊÇ»ùÓÚ flex-shrinkÊôÐÔ£¬¶øÊÇ»ùÓÚ×Ô¶¯¶ÔFlexÏîÄ¿µÄ¿í¶ÈÖØÐ¼ÆË㣨flex-basis: auto£©¡£
Õâ»áµ¼ÖÂFlexÏîÄ¿ÖÁÉÙÓëËüµÄ¿í¶È»òÕ߸߶ȣ¨Èç¹ûÉùÃ÷ÁË£©»òÕßĬÈÏÄÚÈݳߴçÒ»Ñù´ó¡£Çë²»ÒªÍü¼ÇÎÒÔÚ·ÖÎö flex ¼òдÊôÐÔʱÉèÁ¢µÄÔÔò¡£ºóÃæ»áÓиü¶à¼òдµÄ¶«Î÷¡£
ÏÖÔÚÊÂÇé»ã¼¯µ½Ò»ÆðÁË£¬ÏÂÃæÎÒÃǷŵãÑùʽÀ´¶¨Òå¼ä¾àºÍÑÕÉ«¡£
body {
display: flex;
flex-direction: column;
background-color: #fff;
margin: 0;
font-family: Lato, sans-serif;
color: #222;
font-size: 0.9em;
}
footer {
flex: 0 0 90px;
padding: 10px;
color: #fff;
background-color: rgba(61, 100, 158, .9);
} |
ÒÀȻûÓÐÉ¶Ææ¼£¡£Ä㽫¿´µ½µÄЧ¹ûÈçÏÂͼËùʾ£º

¿´¿´ÊÂÇéÊÇÈçºÎ¿ªÊ¼³õ¾ß¹æÄ££¬Äã»áÈÃËü±äµÃ¸üºÃÒ»µã¡£
¹Ì¶¨²à±ßÀ¸
Èç¹ûÄãÊǸú×Åд´úÂ룬¾Í¸üÐÂÒ»ÏÂÄãµÄ HTML Îĵµ¡£
<main>
<aside> <!--Õâ´ú±í²à±ßÀ¸£¬ÆäÖаüº¬ÁËÀ´×Ô font-awesome µÄͼ±ê¼¯-->
<i class="fa fa-bars"></i>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-volume-up"></i>
<i class="fa fa-user"></i>
<i class="fa fa-spotify"></i>
<i class="fa fa-cog"></i>
<i class="fa fa-soundcloud"></i>
</aside>
<section class="content"> <!--ÕâÒ»²¿·Ö»áÈÝÄɳý²à±ßÀ¸ÒÔÍâµÄËùÓж«Î÷-->
</section>
</main> |
ÉÏÃæµÄ´úÂëÁбíÒѾ½âÊ͵ĺÜÇå³þÁË¡£
ÖÁÓÚͼ±êÉèÖã¬ÎÒÓÃÁËÈÈÃÅµÄ Font Awesome ¿â¡£ÕâÑùÓÃÄãÏëÒªµÄͼ±ê¾Í¼òµ¥µ½Ö»ÐèÌí¼ÓÒ»¸ö CSS À༴¿É¡£Õâ¾ÍÊÇÎÒÔÚ aside ±ê¼ÇÖÐËù×öµÄÊÂÇé¡£
ÕýÈç֮ǰ½âÊ͹ýµÄ£¬ÉÏÃæµÄ main ²¿·ÖÒ²»á³ÉΪһ¸öFlexÈÝÆ÷¡£²à±ßÀ¸£¨Óà aside ±ê¼Ç±íʾ£© ÒÔ¼° section»á³ÉΪFlexÏîÄ¿¡£
main {
flex: 1 0 auto; /* ±ä³ÉÒ»¸öµ¯ÐÔÏîÄ¿*/
display: flex; /*Ö»°üº¬ÕâÒ»ÐУ¬ÏÖÔÚ¾ÍÓÐÒ»¸öµ¯ÐÔÈÝÆ÷£¬´øÓе¯ÐÔÏîÄ¿£º²à±ßÀ¸ºÍÖ÷ÄÚÈÝÇø*/
} |
ºÜºÃ£¬Ô½À´Ô½ÓÐÒâ˼ÁË£¬ºÙºÙ¡£
ÏÖÔÚ£¬Ö÷À¸Ä¿ÊÇÒ»¸öFlexÈÝÆ÷ÁË¡£ÏÂÃæÎÒÃÇÀ´´¦ÀíËüµÄFlexÏîĿ֮һ£¬²à±ßÀ¸¡£¸úÈýÅ×¢Îü¸½µ½Ò³Ãæµ×²¿Ò»Ñù£¬Ä㻹»áÏëÈòà±ßÀ¸Îü¸½µ½Ò³ÃæµÄ×ó±ß¡£
aside {
flex: 0 0 40px; /*²»»á·Å´ó»òÕßËõС¡£¹Ì¶¨ÔÚ 40px*/
} |
²à±ßÀ¸Ó¦¸ÃÈÃͼ±ê´¹Ö±¶Ñ·Å¡£¿ÉÒÔÈòà±ßÀ¸±ä³ÉFlexÈÝÆ÷£¬¸øËüÉèÒ»¸ö flex-direction£¬ÈÃËùÓÐͼ±ê´¹Ö±¶Ñ·Å¡£È»ºóÓ¦ÓÃÒ»¸ö¶ÔÆëÊôÐÔ£¬ÈÃͼ±ê¾Íλ¡£
ÔÚÏÂÃæµÄ´úÂëÁбíÖУ¬¿´¿´Äã¿ÉÄÜ»áÔõô×ö¡£
aside {
/* ... */
display: flex; /*ÏÖÔÚÒ²ÊÇÒ»¸öµ¯ÐÔÈÝÆ÷*/
flex-direction: column; /*´¹Ö±¶Ñ·Åͼ±ê*/
/*ÒòΪ·½Ïò¸Ä±äÁË£¬ÈçÏÂÔÚ´¹Ö±·½ÏòÉÏÆð×÷Óá£*/
justify-content: space-around;
align-items: center; /*·½Ïò¸Ä±äÁË£¡ÕâÌõÓ°ÏìµÄÊÇˮƽ·½Ïò¡£½«Í¼±ê¾ÓÖÐ*/
background-color: #f2f2f2; /*ÈÃÎÒ±äÆ¯ÁÁ*/
}
aside i.fa {
font-size: 0.9em; /*ͼ±êµÄ×ÖÌå´óС*/
} |
ÎÒÒѾÔÚÉÏÃæµÄ´úÂëÖмÓÁ˺ܶà×¢ÊÍ£¬ÏÖÔÚ¿´¿´²¼¾ÖÊÇÈçºÎƯÁÁ¡£ºÜ¸É¾»£¬Ö»Óм¸ÐдúÂë¡£ºÏÇéºÏÀíµÄ´úÂ룬ûÓÐÂÒÆß°ËÔãµÄÕÐÊý¡£

Ö÷ÄÚÈÝÇøÄ¿Ç°Êǿյġ£²»ÒªÍü¼ÇËüÊǵڶþ¸öÁбíÏ²à±ßÀ¸ÊǵÚÒ»¸ö¡£¸øÕâÀï·Åһ϶«Î÷¡£¸øÖ÷ÄÚÈÝÇøÌí¼ÓÄÚÈÝÄã¿ÉÒÔÔÙ¿´¿´Í깤µÄÏîÄ¿£¬ÕâÑù¾Í²»»áÍü¼Ç½ÓÏÂÀ´Òª·¢ÉúµÄÊÂÇé¡£
¸üÖØÒªµÄÊÇ£¬ÕâÄܰïÖúÄãÀí½âÏÂÃæµÄ´úÂë¡£¸üРHTML Îĵµ£¬ÔÚ .content²¿·ÖÌí¼ÓÈçϱê¼Ç£º
<section class="content"> <!--ÕâÒ»ÇøÊǿյģ¬ÓÃÄÚÈÝÌî³äËü--> <div class="music-head"> <!--µÚÒ»¸öÁбíÏ°üº¬ÒôÀÖÏêÇé--> <img src="images/cattyboard.jpg" /><!--ר¼·âÃæ--> <section class="catty-music"> <!--ר¼µÄÆäËüϸ½Ú-->
<div>
<p>CattyBoard Top 100 Single Charts (11.06.36)</p>
<p>Unknown Artist</p>
<p>2016 . Charts . 100 songs</p>
</div> <div> <!--Music controls-->
<i class="fa fa-play">Play all</i>
<i class="fa fa-plus">Add to</i>
<i class="fa fa-ellipsis-h">More</i>
</div>
</section> </div> <!--end .music-head--> <!--µÚ¶þ¸öÁбíÏ°üº¬×¨¼ÖеĸèÇúÁбí-->
<ul class="music-list">
<li>
<p>1. One Dance</p>
<p>Crake feat CatKid & Cyla</p>
<p>2:54</p>
<p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
</li>
<li>
<p>2. Panda</p>
<p>Cattee</p>
<p>4:06</p>
<p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
</li>
<li>
<p>3. Can't Stop the Feeling!</p>
<p>Catin Cimberlake</p>
<p>3:56</p>
<p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
</li>
<li>
<p>4. Work From Home</p>
<p>Cat Harmony feat Colla</p>
<p>3:34</p>
<p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
</li>
</ul>
</section> |
àÅ£¬ÎÒ±ÈÉÏ´ÎÌí¼ÓÁ˸ü¶àµÄ¶«Î÷£¬²»¹ýºÜ¼òµ¥¡£ÎÒÓÃÒ»¸ö div Ìî³ä¿ÕÄÚÈݲ¿·Ö£¬Õâ¸ö div ÓÃÀ´ÈÝÄÉ catty ר¼µÄ·âÃæºÍÆäËûϸ½Ú¡£ul ÈÝÄÉר¼µÄ¸èÇúÁÐ±í¡£ÁбíÖÐÓõ¥¶ÀµÄ¶ÎÂäÀ´ÈÝÄɸèÇú±êÌâ¡¢ÒÕÊõ¼Ò¡¢Ê±³¤¡¢¡±_catty cloud sync¡°¡£
ÄÇôÄã´òËãÈçºÎÉèÖÃÑùÊ½ÄØ£¿¿´¿´ÎÒÔõô×öµÄ£¿
Ê×ÏÈ£¬Ó¦¸ÃÈà .content²¿·Ö³ÉΪFlexÈÝÆ÷¡£
.content {
display: flex;
flex: 1 0 auto; /*ÕâÈ·±£±¾ÇøÉìÕ¹µ½ÌîÂú¿ÉÓÿռä*/
flex-direction: column;
} |
»¹Ó¦¸Ã´¦ÀíËüµÄFlexÏîÄ¿£º
.music-head {
flex: 0 0 280px; /*ÏàͬµÄ±¸Íü£¬²»ÒªÉìÕ¹»òÊÕËõ - ¹Ì¶¨Îª 280px*/
display: flex;
padding: 40px;
background-color: #4e4e4e;
}
.music-list {
flex: 1 0 auto;
list-style-type: none;
padding: 5px 10px 0px;
} |
.music-head ÈÝÄÉר¼·âÃæÒÔ¼°ÆäËüר¼Ï¸½Ú¡£ÏàͬµÄ±¸Íü¼£¬²»ÒªÉìÕ¹»òÕßÊÕËõ£¬±£³Ö¸ß¶ÈΪ 280px¡£¸ß¶È£¿Ã»Óпí¶È£¿Êǵģ¡
¸¸ÔªËØÒѾÇл»ÁË flex-direction¡£ËæºóÐèÒªÈÃËü±ä³ÉÒ»¸öµ¯ÐÔÈÝÆ÷£¬ËùÒÔдÉÏ display: flex¡£.music-list ÈÝÄɸèÇúÁÐ±í£¬ÌîÂúÓëÉÏÃæµÄ .music-head ¹²ÏíµÄÊ£Óà¿ÉÓÿռ䡣
ÕâÒÀȻûÈÃÈ˾õµÃÓÐ¶àÆ¯ÁÁ£¬²»¹ýÀ´°É£¬Èç¹ûÄ㻹¸ú×Å£¬Äã×öµÄºÜ²»´íÁË¡£ÔÞһϡ£

ÕâÀïÓм¸¸öÎÊÌâ¡£
¸èÇúÁÐ±í¿´ÆðÀ´ºÜÔã¸â

°üº¬ÒôÀÖ·âÃæµÄ²¿·ÖÓÐÕæµÄºÜÄÑ¿´µÄÎı¾

ÎÒ»áÔÙ´ÎÀ´Äã½â¾öÕâЩÎÊÌâ¡£
ÏÂÃæÊÇÎÒÌá³öµÄ½â¾ö·½°¸¡£
´¦Àí¸èÇúÁбí
ÿ¸ö¸èÇúÁбí°üº¬ 4 ¸ö¶ÎÂ䣬¸èÃû¡¢ÒÕÊõ¼Ò¡¢Ê±³¤ºÍ ¡°catty cloud sync¡±¡£
Ò»¶¨Óа취ÈÃËùÓÐÕâЩ·ÅÔÚÒ»ÐУ¬Ã¿¸ö¶ÎÂäÕ¼¾Ý¸ÃÐÐÏàµÈ¿Õ¼ä¡£ÓÃFlexboxÀ´¸ã¶¨£¡ÕâÀïµÄ¸ÅÄîÓëºÜ¶àÕ¤¸ñϵͳÖÐÓõÄÒ»Ñù¡£
li {
display: flex; /*¶ÎÂäÏÖÔÚÏÔʾÔÚÒ»ÐÐÉÏ*/
padding: 0 20px; /*ÁôµãºôÎü¿Õ¼ä*/
min-height: 50px;
}
li p {
flex: 0 0 25%; /*ÕâÊÇÌðÃæ½´*/
} |
¿´µ½¶ÎÂä»á·¢ÉúʲôÁËÂð£¿
flex: 0 0 25%;
¡°²»ÒªÉìÕ¹»òÕßÊÕËõ£¬²»¹ýÿ¸ö¶ÎÂäÓ¦¸ÃÕ¼¾Ý 25% µÄ¿ÉÓÿռ䡱 ¡£¶ÎÂäËùÕ¼¿Õ¼äÊÇÏàµÈµÄ¡£
ʹÓÃÕâÖÖ¼¼Êõ
ÕâÖÖ¼¼ÊõÊǺÜÓÐÓõġ£¿ÉÒÔÓÃËüÀ´´´½¨²»ÏàµÈµÄÄÚÈÝÇø¡£±ÈÈ磬Á½À¸ÊÓͼ¡£
Ò»¸öÀ¸Ä¿¿ÉÒÔÕ¼¿ÉÓÿռäµÄ 60%£¬ÁíÒ»¸öÕ¼ 40%£º
.first-section: 0 0 60%;
.second-section: 0 0 40%;
¿ÉÒÔÓÃÕâÖÖ¼¼Êõ´´½¨Õ¤¸ñϵͳ¡£Ä㽫¿´µ½µÄЧ¹ûÈçÏ£º

¸øÁÐ±í½»ÌæµÄÑÕÉ«£¬Ò²´¦ÀíһϠ¡°catty cloud sync¡± ±êÇ©¡£
li span.catty-cloud {
border: 1px solid black;
font-size: 0.6em;
padding: 3px;
}
li:nth-child(2n) {
background-color: #f2f2f2;
} |
ËùÒÔ£¬ÄãÕ÷·þËüÁË£¬¿ªÊ¼¸üºÃÀí½âFlexbox·½ÑÔÁË¡£ÕâÊÇÄãÏÖÔÚÓ¦¸ÃµÃµ½µÄ¶«Î÷ÁË¡£

ÏÖÔÚÒª´¦ÀíµÚ¶þ¸öÎÊÌâÁË¡£ÈÃÏà²áÏêÇéÎı¾¿´×ŸüºÃ¿´µã¡£ÏÂÃæÕæÊǺܼòµ¥µÄÊÂÇé¡£
.catty-music{
flex: 1 0 auto;
display: flex;
flex-direction: column;
font-weight: 300;
color: #fff;
padding-left: 50px;
}
.catty-music div:nth-child(1){
margin-bottom: auto;
}
.catty-music div:nth-child(2){
margin-top: 0;
}
.catty-music div:nth-child(2) i.fa{
font-size: 0.9em;
padding: 0 0.7em;
font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
font-size: 1.8em;
margin: 0 0 10px;
}
.catty-music div:nth-child(1) p:not(:first-child){
font-size: 0.9em;
margin: 2px 0;
} |
Äã×öµ½ÁË£¬¶øÇÒ×öµÄÏ൱²»´í¡£

Ò»¸ö¿ìËÙÁ·Ï°
ÎÒÁôϽÅ×¢²¿·Ö¸øÄã×÷ΪÁ·Ï°¡£ÊÔ×Å×Ô¼º½â¾ö½Å×¢¡£Ö»Ðè²ÉÓÃÏàͬµÄ¼¼Êõ¡£ÄãÖªµÀÄãÄܸ㶨Âð£¿Èç¹û¿¨×¡ÁË£¬¿ÉÒԲ鿴 Catty Music µÄÍêÕûÔ´´úÂë¡£ÄãÒ²¿ÉÒÔ°ÑÕû¸ö½Å×¢·Ö³ÉFlexÏîÄ¿£¬´ÓÕâÀ↑ʼ¡£

¼òÖ±²»ÏàÐÅÄãµ½ÁËÕâÒ»²½¡£ÏÂÃæ£¬Äã»á¿´µ½FlexboxÊÇÈçºÎÓÐÖúÓÚÏìӦʽÉè¼Æ¡£
FlexboxÓÃÓÚÏìӦʽÉè¼Æ

ÒѾÓв»ÉÙ¹ØÓÚÏìӦʽÉè¼ÆµÄÊ飬Óв»ÉÙÊ黹²»´í¡£
ÒòΪ±¾ÎÄרעÓÚFlexbox£¬ËùÒÔÎÒ²»»áÉîÈëÏìӦʽÉè¼Æ¡£
Èç¹ûÄã´Óδ½Ó´¥¹ýÈκιØÓÚÏìӦʽÉè¼ÆÏà¹ØµÄ֪ʶ£¬½¨ÒéÄãµã»÷ÕâÀï½øÐÐÁ˽⡣
ÏñÎÒ֮ǰÔÚij´¦Ëµ¹ýµÄÄÇÑù£¬ÓÃFlexbox£¬ÎÒÃÇȷʵµÃµ½ÁËһЩ¿ªÏä¼´ÓõÄÏìÓ¦ÐÔ¡£
Flexbox¾ÍÏñ µ¯ÐԵĺÐ×Ó ¡£²»¹ý£¬¿ÉÒÔͨ¹ýýÌå²éѯ¸ã¶¨²»Í¬µÄÆÁÄ»³ß´ç£¬È»ºó¸Ä±äµ¯ÐÔÐÐΪ¡£
ÈçÏÂÊÇÒ»¸öʾÀý¡£ÎÒÃÇÓÖÓüòµ¥ÎÞÐòÁбíÀ´°ïæ¡£
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Register</li>
<li>Login</li>
</ul> |
²¢ÇÒÉèÖõãÑùʽ¡
ul {
list-style-type: none;
display: flex;
border: 1px solid #4e4e4e;
}
li {
flex: 0 0 auto;
padding: 10px;
margin: 10px;
background-color: #8cacea;
color: #fff;
font-size: 1em;
} |
ÏÖÔÚÄãÒѾÊÇFlexboxר¼ÒÁË£¬ËùÒÔÄãÖªµÀÊÇÕ¦»ØÊ¡£
ÈçÏÂÊǵ¼º½À¸µÄÑù×Ó¡£

Õâ¶ÔÓÚ×ÀÃæÒÔ¼°Æ½°åµçÄÔ¿ÉÄÜ»¹Í¦¿á£¬²»¹ýÔÚijЩÆÁÄ»³ß´çÉÏ£¬¾ÍÌØ±ðÄÑ¿´¡£ÔÚÒÆ¶¯É豸ÉÏ£¬Äã»áÏëÈõ¼º½ÌõÄ¿´¹Ö±¶Ñ·Å¡£È»ºóýÌå²éѯ¾ÍµÇÌÃÈëÊÒÁË¡£
@media screen and (max-width: 769px) {
/* ÕâÀïµÄ´úÂëÖ»ÊÊÓÃÓÚ¿í¶ÈСÓÚ 769px µÄÆÁÄ»É豸*/
ul {
flex-direction: column; /* ÔÚ¸üСµÄÉ豸ÉÏ£¬Çл»·½Ïò*/
}
} |

Èç¹ûÔÚÕâ֮ǰ£¬Äã¶ÔÏìӦʽÉè¼Æ»¹¶®ÄÇôµã£¬ÄǾÍÌ«°ôÁË¡£°ÑFlexboxÄÉÈëÄãÒÑÓеÄ֪ʶºÃÁË¡£
˳±ã˵һ¾ä£¬ÎÒ¼ÙÉèÄãÀí½âýÌå²éѯÊÇʲô¡£Èç¹û²»Àí½âµÄ»°£¬¿´¿´ÏÂÃæµÄ¼ò½é¡£
ýÌå²éѯ
ýÌå²éѯÊÇÏìӦʽÉè¼ÆµÄºËÐÄ£¬ÈÃÄã¿ÉÒÔÒÔÌØ¶¨ÆÁÄ»³ß´çΪĿ±ê£¬µ¥¶ÀÖ¸¶¨ÔËÐÐÔÚ¸ÃÉ豸ÉϵĴúÂë¡£
ʹÓÃýÌå²éѯ×îÁ÷ÐеÄÐÎʽÊÇ @media ¹æÔò¡£
Ëü¿´ÆðÀ´ÊÇÕâÑùµÄ£º
@media screen and (max-width: 300px) {
/*ÔÚÕâ¸ö´úÂë¿éÖÐд CSS*/
} |
¿´×ÅÕâ¶Î´úÂ룬²Â¶¼¿ÉÒԲµ½ËüµÄ×÷Óá£
¡°¶ÔÓÚ×î´ó¿í¶ÈΪ 300px µÄÆÁÄ»É豸¡ ×öÕâ×öÄÇ¡±
ÔڸôúÂë¿éÖеÄÈκÎÑùʽ¶¼½«ÊÊÓÃÓÚÆ¥Åä±í´ïʽµÄÉ豸£¬¼´ ¡°screen and (max-width: 300px)¡± ¡£
ÎÒ²ÂÕâÓÐÖúÓÚÏû³ýһЩÒÉ»ó¡£
¿ìËÙÁ·Ï°
Catty music ÔÚÒÆ¶¯É豸ÉϵÄÏÔʾÓÐËù²»Í¬¡£Õâ¿ÉÊǸöºÃÏûÏ¢¡£¸ü°ôµÄÊÇÄãÓ¦¸ÃÊÔ×ÅÖØÐ´´½¨Ëü¡£

Èç¹ûÄãÓöµ½ÁËÄÑÌ⣬±¾½Ì³Ì´úÂë¿âµÄÁ´½ÓÔÚÏÂÒ»½Ú¡£½â¾ö·½°¸Ò²ÔÚ²Ö¿âÖС£¿ìµ½×îºóÁË£¡ÔÚ×ܽᲿ·Ö£¬ÎÒ½«ÌÖÂÛä¯ÀÀÆ÷Ö§³Ö¡¢ÓÐÓõÄÁ´½ÓºÍ°ïÖúÄãÉÏÊÖµÄ×ÊÔ´¡£
×ܽá

ÄãÒѾѧϰÁËÈçºÎʹÓÃFlexÈÝÆ÷ºÍFlexÏîÄ¿µÄ¶ÔÆëÊôÐÔ¡£ÎÒÒýµ¼ÄãÀí½âÁ˾ø¶ÔºÍÏà¶Ôµ¯ÐÔ¡¢×Ô¶¯Íâ±ß¾à¶ÔÆëÒÔ¼°Çл»µ¯ÐÔ·½Ïò¡£Ä㻹Óлú»á½«Flexbox¼¼ÄÜÓ¦Óõ½´´½¨ Catty Music Ó¦Óã¬È»ºóÎÒÒ²Ìáµ½ÁËÏìӦʽÉè¼Æ¡£
ÕâȷʵÊÇÒ»¶ÎÂþ³¤µÄÂó̡£
ÏÖÔÚ£¬ÎÒ»áÏòÄã½âÊÍһЩ×îÖյĸÅÄî¡£ÓÃһЩÎÒÈÏΪÄã»á·¢ÏÖºÜÓÐÓõÄ×ÊÔ´ºÍÁ´½Ó°ïÖúÄã¡£
FlexboxµÄä¯ÀÀÆ÷Ö§³Ö
ÕâÊǵ±ÇãÏòÓÚÔÚÉú²úÖÐʹÓÃFlexboxʱ£¬±»Îʵ½µÄÒ»¸ö³£¼ûµÄÎÊÌâ¡£ÕâÎÊÌâÎÒҲû·¨ºÜºÃ»Ø´ð£¬²»¹ý caniuse ÍøÕ¾Äܺܺô¦ÀíÕâ¸öÎÊÌâ¡£
ÈçÏÂÊÇÒ»¸öÀ´×Ô caniuse µÄÆÁÄ»½ØÍ¼£¬ä¯ÀÀÆ÷Ö§³ÖºÜ°ô¡£Äã¿ÉÒÔÔÚÕâÀï×Ô¼º¿´¡£

ÔÚÎÒÖ°ÒµÉúÑÄÔçÆÚ£¬ÎÒä¯ÀÀ¹ý caniuse ºÜ¶à´Î£¬ÒÀȻû·¨ÕÆÎÕ±íʾµÄÊý¾ÝÊÇʲôÒâ˼¡£ËùÒÔÕâÀïÓÐÒ»¸ö¼òµ¥µÄ½âÊÍ¡£
caniuse ÍøÕ¾µÄÓÒϽÇÊÇÒ»¸öͼÀý¡£

¿´¿´ÉÏÃæµÄͼÏñ£¬»òÕ߾ͷÃÎÊÒ»ÏÂÍøÕ¾£¬ÕÒµ½Í¼Àý£¬¾ÍÃ÷°×ÁË¡£Êµ¼ÊÉϾÍÊÇÕâô»ØÊ¡£
|