行內(nèi)元素居中：

? ? ?常用的行內(nèi)元素比如文本、圖片、按鈕等，可以通過給父元素添加一個：text-align:center;

塊元素居中：

? ? ?給塊元素添加一個固定的寬度，然后把塊元素的左右外邊距都設(shè)置成auot：margin-left:auto;margin-right:auto;（常用）

使用flex：

? ? 特點：

? ? ? ? ? ? 1.塊級布局側(cè)重垂直方向、行內(nèi)布局側(cè)重水平方向，flex布局是與方向無關(guān)的。

? ? ? ? ? ? 2.flex布局可以實現(xiàn)空間自動分配、自動對齊（flexible：彈性、靈活）

? ? ? ? ? ? 3.flex適用于簡單的線性布局，更復(fù)雜的布局要交給grid布局（還沒發(fā)布）

? ? Flex-container的屬性（父元素）

? ? ? ? ? ? 1.flex-direction方向 ?（控制容器里面的的元素方向，是水平(row)還是垂直(column)）

? ? ? ? ? ? 2.flex-wrap換行 (默認(rèn)是：flex-wrap:nowrap;如果父元素中子元素的寬度超過了容器，默認(rèn)子元素不換行；flex-wrap:wrap;如果子元素的寬度超過了父元素容器，子元素會換行顯示；)

? ? ? ? ? ? 3.flex-flow上面兩個的簡寫

? ? ? ? ? ? 4.justify-content主軸方向?qū)R方式 （父元素設(shè)置成：justify-content:center;里面的子元素會居中顯示；）

? ? ? ? ? ? 5.align-items側(cè)軸對齊方式

? ? ? ? ? ? 6.align-content多行/列內(nèi)容對齊方式（用的較少）

? ? Flex item的屬性（子元素）

? ? ? ? ? ?1.flex-grow增長比例（空間過多時）

? ? ? ? ? ?2.flex-shrink收縮比例（空間不夠時）

? ? ? ? ? ?3.flex-basis默認(rèn)大?。ㄒ话悴挥茫?/p>

? ? ? ? ? ?4.flex上面三個的縮寫

? ? ? ? ? ?5.order順序（代替雙飛翼）

? ? ? ? ? 6.align-self自身的對齊方式（用的較少）