文章插圖
HTML系列：
- 人人都懂的HTML基礎知識-HTML教程(1)
- HTML元素大全(1)
- HTML元素大全(2)-表單
- CSS基礎知識筑基
- 常用CSS樣式屬性
- CSS選擇器大全48式
- CSS布局秘籍(1)-任督二脈BFC/IFC
- CSS布局秘籍(2)-6脈神劍
display: flex;Gid二維網格，非常靈活、強大不明顯IE10display:gridcolumn-count列式布局，適應性強注意內容跨列折斷IE10column-count: 2;float文字環繞效果，勉強算優點吧脫離文檔流，重疊、坍塌，坑多良好float:leftposition適合特殊位置定位需求適用特定場景 ， 還行良好position: absolute;表格布局工整的表格布局不支持合并，不太好用IE8display: table;01、Flex彈性盒子(display:flex)Flexbox(IE11)是 CSS 彈性盒子布局模塊（Flexible Box Layout Module）的縮寫，用于實現橫向或縱向的單向布局，在父元素（flex容器）上應用display: flex ，所有子元素（flex項）都將會按照 flex 進行布局 。Flex是新一代的CSS排版布局系統，使用簡單 ， 不用擔心float浮動布局的各種坑 ， 推薦食用 。flex 布局需了解他的兩根軸：- 主軸：
flex-direction定義的方向，就是flex項排列的方向，默認橫向排列，從左到右 。 - 交叉軸：垂直與主軸的方向 。
文章插圖
父元素屬性描述值/備注display: flex; IE11父元素啟用flex布局
display: flex; flex-flow(父元素)flex-direction 和 flex-wrap 的簡寫屬性flex-flow: row nowrap;?flex-direction(父)彈性盒子（子元素）的排列方式● row：橫向排列（默認值）；column：縱向排列● row-reverse（反序）、column-reverse?flex-wrap(父)設置換行 ， 默認nowrap不換行 。(wrap /r?p/換行)● nowrap：擺放到到一行，超出會導致溢出● wrap：換行；wrap-reverse：換行+反序align-items(父)垂直對齊：元素在交叉軸方向對齊方式● center 居中、flex-start、flex-end● stretch： /stret?/ 拉伸justify-content(父)水平對齊：設置主軸方向上對齊，主軸方向是通過 flex-direction 設置的方向 。(justify/?d??st?fa?/ 對齊)● center、stretch、flex-start、flex-end● space-around：均勻排列，居中排列● space-between：均勻排列，兩端對齊flex項（子元素）屬性描述值/備注flex (flex項) IE11設置flex項的尺寸，下面三個的簡寫flex: 1 1 100px;?flex-grow設置 flex 項的尺寸增長系數 ， 等比分配number?flex-shrink設置收縮系數 ， 按比例計算number ， （shrink /?r??k/ 縮?。?/td>?flex-basis初始大小(/?be?s?s/)，優先級高于width/height尺寸值 px/%；content：根據內容的自動尺寸order(flex項)flex項的序號 ， 設置排序，默認值0排第一排序索引，數字<style>.flex {display: flex;flex-flow: row wrap;align-items: stretch;justify-content: stretch;}/*注意這里，一般用子代選擇器*/.flex>div {flex: 1 200px;background-color: #9be6bd;padding: 10px;}.flex>div:nth-child(even){background-color: #eeb2cb;}</style><div class="flex"><div><b> div1：</b><p>Flexbox 是 CSS 彈性盒子布局模塊（Flexible Box Layout Module）的縮寫</p></div><div>div2：</div><div>div3：</div><div>div4：</div><div>div5：</div></div>
文章插圖
下面代碼為基于
flex的柵格布局（12格），可以自動等比例劃分網格，比float浮動的柵格方便多了 。.row {display: flex;}.col {margin-left: 2.08333333%;margin-bottom: 1em;width: 6.25%;flex: 1 1 auto;background: rgb(255,150,150);}02、Grid網格布局(display:grid)grid布局是一個二維布局系統，通過行、列設置定義一個網格，然后子元素按照順序排列網格，或者設置其行列網格坐標 。一個gird網格通常具有許多的行（row）與 列（column），以及行與行、列與列之間的間隙，這個間隙一般被稱為溝槽（gutter /?ɡ?t?r/水溝） 。屬性描述值/補充
display: grid;父元素啟用grid布局還可以設置為inline-grid，行內網格grid-template-rows、grid-template-columnsIE10定義行/列的二維網格，一個參數為一行/列，多行/列定義多個值 ， 空格隔開
推薦閱讀
- 1 CSS布局秘籍-任督二脈BFC/IFC
- 簡易版 純css愛心代碼-最近超級火的打火機與公主裙中的愛心代碼
- CSS選擇器大全48式
- 常用CSS樣式屬性
- 現代 CSS 指南 -- at-rule 規則掃盲
- CSS基礎知識筑基
- CSS 動畫一站式指南
- 為什么CSS中的calc函數可能會不生效？
- day03-CSS
- CSS 漸變鋸齒消失術