网页布局与设计例子：单页面页面重构-HTML5部分flex.docxVIP

深入解析 CSS Flexbox Flexbox 是一個 CSS3 的盒子模型 ( box model )，顧名思義它就是一個靈活的盒子 ( Flexible Box )，為什麼最近這個屬性才紅起來呢？最主要也是因為 CSS3 的規範終於普及 ( 或 IE 終於敗亡 )，加上行動裝置的發展促成了響應式布局興起，自適應長寬彈性相當大的 Flexbox 就趁勢而起了。 第一步要來看 Flexbox 的盒子模型，根據? W3C?文章所描述，flex 的盒子模型如下圖所呈現，與一般的盒子模型不同的地方，在於 Flexbox 的盒子模型具有水平的起點與終點?( main start、main end )，垂直的起點與終點?( cross start、cross end )，水平軸與垂直軸?( main axis、cross axis )，然後元素具有水平尺寸與垂直尺寸?( main size、cross size )，這些都是相當重要的布局規畫。 再來我們先看看 Flexbox 有哪些屬性，也可參考? W3C css3 flexbox css3-flexbox： display flex-direction justify-content align-items align-self align-content flex-wrap order flex display display 是我們熟知的 CSS 屬性，對於 Flexbox 來說，多了有兩種方式可以設定，預設為「flex」，其布局方式與 block 幾乎類似，都會強迫換行，但設定display:flex的子元素卻具備了更多彈性的設定，此外另外一種方式則是「inline-flex」，和 inline-block 也是幾乎雷同，意義上都是一個display:flex的元素外面包覆display:inline的屬性，在後方的元素不會換行。( 範例： css-flexbox-demo1.html) CSS： .flex, .inline-flex{ width:100px; height:50px; border:1px solid #000; } .flex{ display:flex; } .inline-flex{ display:inline-flex; } flex-direction flex-direction 表示 Flexbox 內容元素的「排列方向」，分別有下列四種。( 範例： css-flexbox-demo2.html?) row：預設值，由左到右，從上到下 row-reverse：與 row 相反 column：從上到下，再由左到右 column-reverse：與 column 相反 CSS： .flex-row{ flex-direction:row; } .flex-row-reverse{ flex-direction:row-reverse; } .flex-column{ flex-direction:column; } .flex-column-reverse{ flex-direction:column-reverse; } justify-content justify-content 決定了內容元素與整個 Flexbox 的「水平對齊」位置，回想一下最上面講的 Flexbox 盒子模型，具有 main start 與 main end 左右兩個端點，justify-content 就是按照這個方式做設定，而其中的設定值總共有下列五個。( 範例： css-flexbox-demo3.html、 W3C 說明?) flex-start：預設值，對齊最左邊的 main start flex-end：對齊最左邊的 main end center：水平置中 space-between：平均分配內容元素，左右元素將會與 main start 和 main end 貼齊 space-around：平均分配內容元素，間距也是平均分配 CSS： .flex-start{ justify-content:flex-start; } .flex-end{ justify-content:flex-end; } .center{ justify-content:center; } .space-between{ justify-content:space-between; } .space-around{ justify-content:space-around; } align-items align-items 剛好和 j