課程播放地址：http://www.gxlcms.com/course/441.html

該老師講課風格:

教師講課生動形象，機智詼諧，妙語連珠，動人心弦。一個生動形象的比喻，猶如畫龍點睛，給學生開啟智慧之門；一種恰如其分的幽默，引來學生會心的微笑，如飲一杯甘醇的美酒，給人以回味和留戀；哲人的警句、文化的箴言不時穿插于講述中間，給人以思考和警醒。

本視頻中較為難點是CSS3插入行內盒子了：

　CSS3引入的布局模式Flexbox布局，主要思想是讓容器有能力讓其子項目能夠改變其寬度，高度，以最佳方式填充可用空間。Flex容器使用Flex項目可以自動放大與收縮，用來填補可用的空閑空間。
　　更重要的是，Flexbox布局方向不可預知，不像常規的布局(塊級從上到下，內聯從左到右)，而那些常規的適合頁面布局，但對于支持大型或者復雜的應用程序就缺乏靈活性。
　　如果常規布局是基于塊和內聯文本流方向，那么Flex布局就是基于“Flex-flow”方向。先來了解一下伸縮盒模型的一些專用術語。

主軸：Flex容器的主軸主要用來配置Flex項目。他不一定是水平的，這主要取決于fle-direction屬性。
　　主軸起點，主軸終點：Flex項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
　　主軸長度：Flex項目在主軸方向的寬度或高度就是項目的主軸長度，Flex項目的主軸長度屬性是width或height屬性，由哪一個對著主軸方向決定。
　　側軸：與主軸垂直的軸稱作側軸，是側軸方向的延伸。
　　側軸起點，側軸終點：伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
　　側軸長度：Flex項目在側軸方向的寬度或高度就是項目的側軸長度，Flex項目的側軸長度屬性是widht或height屬性，由哪一個對著主軸方向決定。

　　Flex布局的語法規范經過幾年發生了很大的變化，也給Flexbox的使用帶來一定的局限性，因為語法規范版本眾多，瀏覽器支持不一致，致使Flexbox布局使用不多。Flexbox布局語法規范主要分成三種。

這里還給大家推薦了源碼資源的下載：http://www.gxlcms.com/xiazai/learn/2127

資源里面給大家分享了視頻課件以及源碼

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com