(4.3)--3.3FlexBox(下)Web前端攻城狮.pdf

《(4.3)--3.3FlexBox(下)Web前端攻城狮.pdf》由会员分享，可在线阅读，更多相关《(4.3)--3.3FlexBox(下)Web前端攻城狮.pdf（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、3.3Flexible Box（下）主轴与侧轴主轴侧轴justify-contentjustify-contentjustify-contentABCjustify?content:flex?startjustify?content:flex?endjustify?content:centerjustify?content:space?betweenjustify?content:space?aroundjustify?content:space?evenlyhttps:/s.codepen.io/webzhao/debug/JezNqa/yYryLOonNbaMalign-itemsalig

2、n-itemsalign-itemsABCalign?items:flex?startalign?items:flex?endalign?items:centeralign?items:stretchalign?items:baselinehttps:/s.codepen.io/webzhao/debug/eQajRR/DqrDdKbXyEPralign-selfalign-selfalign-selfABC.a align?self:flex?start.a align?self:flex?end.preview align?items:center.a align?self:flex?en

3、d https:/s.codepen.io/webzhao/debug/LXoJMp/jVMpoynmeJalign-contentalign-contentalign-contentABCDEFGHIIalign?items:flex?start;align?content:flex?startalign?items:flex?end;align?content:flex?startalign?items:flex?end;align?content:flex?endalign?items:stretch;align?content:stretchalign?items:stretch;al

4、ign?content:space?betweenalign?items:stretch;align?content:space?aroundhttps:/s.codepen.io/webzhao/debug/qQGJVr/VGAWNwEqorderorderorderABC.a order:1.a order:1.b order:2 https:/s.codepen.io/webzhao/debug/OaYamK/mWkoNxDn My Blog?h1 Home?a Posts?a About?a?nav?header My blog title?h2 Some content in par

5、agraph 1?p Some content in paragraph 2?p Some content in paragraph 3?p Some content in paragraph 4?p?article?main Hot topics?h3 My BlogHome Posts AboutHot topicsTopic 1Topic 2Topic 3My blog titleSome content in paragraph 1Some content in paragraph 2Some content in paragraph 3Some content in paragraph 4Copyrights 2018https:/s.codepen.io/webzhao/debug/aQrXBd/gaAeYZEwJX