基本概念
1、主軸：flex容器的主軸主要用來配置flex專案，預設是水平方向
2、側軸：與主軸垂直的軸稱作側軸，預設是垂直方向的
3、方向：預設主軸從左向右，側軸預設從上到下
4、主軸和側軸並不是固定不變的，通過flex-direction可以互換
display: flex;//效果特徵1、設定了伸縮屬性，在沒有設定寬度的情況下是100%給父盒子加flex屬性，父盒子將具有伸縮屬性，子盒子預設平鋪
2、設定了伸縮屬性，行內元素會轉化成塊級元素，可以設定寬高，獨佔一行
主軸方向
flex-direction: row;//水平方向（預設）
flex-direction: row-reverse;//
水平翻轉
flex-direction: column;//
垂直方向
flex-direction: column-reverse;//
垂直翻轉
對齊方式
1、justify-content：設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
justify-content: flex-start;//從主軸開始的方向對齊
justify-content: flex-end;//
從主軸結束的方向對齊
justify-content: center;//
居中對齊
justify-content: space-around;//
父盒子中平分
justify-content: space-between;//
兩端對齊平分
2、align-items：設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items:flex-start;//從側軸開始的方向對齊
align-items:flex-end;//
從側軸結束的方向對齊
align-items:center;//
居中align-items:baseline;//
基線對齊，預設同flex-start
align-items:stretch;//
拉伸
HTML5 布局篇 總結
1 像這樣的行內標記，定義它的margin top和margin bottom是無效的，除非你把它設定為塊狀元素才可以。display block 2 對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 div 等等，3 無論什麼元素，一旦設定為是浮動顯示，就擁有了完整的盒模型結構...
html5 彈性布局一
1.彈性布局，解決高度塌陷的問題 2.彈性布局只對他的直接子元素控制，子元素的子元素不控制 3.彈性布局有主軸概念，當x軸為主軸，y為側軸，預設主軸的方向從左到右。flex direction row row reverse 從左到右 從右到左 當y軸為主軸時側軸為x軸，預設方向是從上到下。flex...
html5 響應式布局
一 什麼是響應式布局?響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移...