Äú¿ÉÒÔ¾èÖú£¬Ö§³ÖÎÒÃǵĹ«ÒæÊÂÒµ¡£

1Ôª 10Ôª 50Ôª





ÈÏÖ¤Â룺  ÑéÖ¤Âë,¿´²»Çå³þ?Çëµã»÷Ë¢ÐÂÑéÖ¤Âë ±ØÌî



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓÆµ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Model Center   Code  
»áÔ±   
   
 
     
   
 ¶©ÔÄ
  ¾èÖú
Àí½â Flexbox£ºÄãÐèÒªÖªµÀµÄÒ»ÇÐ
 
À´Ô´£ºOwenµÄ²©¿Í ·¢²¼ÓÚ£º 2017-5-18
  2216  次浏览      29
 

ÕâÆªÎÄÕ½éÉÜÁË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¾ÍÓÐÕâÖÖ¿ÉÄÜ£º

ul {
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: 0 1 auto;
}

ÉÏÃæµÄ´úÂëÏ൱ÓÚ£º

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

li {
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

li {
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ÏîÄ¿µÄ¿í¶È£¬ËüÃǾͲ»ÔÙÌîÂúÕû¸ö¿Õ¼äÁË£º

li {
width: 200px;
}

Èç¹ûÏë°ÑÁбíÏîÒÆµ½ÆÁÄ»Öмä¸ÃÔõô°ìÄØ£¿

ÔÚÓ¢ÓïÖУ¬ÕâÊÇÄ㵽ĿǰΪֹ´¦Àíµ¯ÐÔÈÝÆ÷µÄ·½Ê½¡£¾ÍÊÇ˵£¬ °Ñ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 ÍøÕ¾µÄÓÒϽÇÊÇÒ»¸öͼÀý¡£

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

   
2216 ´Îä¯ÀÀ       29
Ïà¹ØÎÄÕÂ

¹È¸è½ÌÄãÈçºÎ¹¹½¨Ò»¸öÓÅÐãµÄÒÆ¶¯ÍøÕ¾
ÈçºÎ¸ßЧµØ¹ÜÀíÍøÕ¾¾²Ì¬×ÊÔ´
¸ßÐÔÄÜÍøÕ¾½¨ÉèµÄ×î¼Ñʵ¼ù
Ïл°ÍøÕ¾×ó²àµ¼º½µÄʵÏÖ
 
Ïà¹ØÎĵµ

ÍøÕ¾½¨Éè·½°¸Á÷³Ì
ÍøÕ¾½¨Éècss½Ì³Ì
ÆóÒµÍøÕ¾½¨ÉèÓëÍÆ¹ã
ÍøÕ¾½¨Éè·½°¸Êé
Ïà¹Ø¿Î³Ì

Éè¼ÆÄ£Ê½Ô­ÀíÓëÓ¦ÓÃ
´ÓÐèÇó¹ý¶Éµ½Éè¼Æ
Èí¼þÉè¼ÆÔ­ÀíÓëʵ¼ù
ÈçºÎ±àд¸ßÖÊÁ¿´úÂë