css3的flex布局已經是前端必會，想學flex布局的話，推薦大家看阮一峰的網路日誌·flex 布局教程：語法篇，這裡只是複習一下flex布局的常用屬性：justify-content、align-items、flex、align-content。
/**
* …………………………flex布局………………………………
* * 常用屬性
* * justify-content 屬性定義了專案在主軸上的對齊方式，也就是x軸上。
* flex-start：左對齊 | flex-end：右對齊 | center：居中
* | space-between：兩端對齊，專案之間的間隔都相等。 | space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
* * align-items 屬性定義專案在交叉軸上如何對齊，也就是y軸上。
* flex-start：交叉軸的起點對齊 | flex-end：交叉軸的終點對齊 | center：交叉軸的中點對齊
* | baseline: 專案的第一行文字的基線對齊 | stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
* * flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。
* 1：當有剩餘空間時，放大或縮小 | auto：內容撐開寬度 | 0：不縮放
* ** align-content 屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
* 就是，如果是換行且有多行，align-content定義了多行的對齊方式
* flex-start：向左上角靠攏排列 | flex-end：向左下角靠攏排列 | center：多行靠攏後在中間排列
* | space-between：第一行貼上面，最後一行貼下面，剩下的中間排列 | space-around：多行的行間距相等，多行之間的間隔比一行與上下邊框的間隔大一倍。
***/
/** ……………………………………………… 橫向x軸布局 row ……………………………………………… */
/** 水平靠左，垂直居中 */
.flex-x-left
/** 水平居中，垂直居中 */
.flex-x-center
/** 水平靠兩邊，垂直居中 */
.flex-x-between
/** 水平間距相同，垂直居中 */
.flex-x-around
/** 水平居中，垂直靠上 */
.flex-x-top
/** 水平居中，垂直靠下 */
.flex-x-bottom
/** ……………………………………………… 縱向y軸布局 column ……………………………………………… */
/** 水平居中，垂直居中 */
.flex-y-center
/** 寬高100% */
.img-full
/** 單行文字省略 */
.text-one-ellipsis
/** 兩行文字省略 */
.text-two-ellipsis
/** 水平線 */
.dividing-line
CSS樣式常用屬性整理
web工程師是最近5年剛剛興起的一門高薪職業，人們的專注度越來越高。那麼前端除了學習html標籤之外還需要掌握什麼知識點呢？為大家整理了乙個和html標籤密不可分的知識要點 css樣式常用屬性 css 常用屬性 z index auto 預設值 檢索或設定物件的層疊順序。並級的物件，此屬性引數值越大...
CSS樣式常用屬性整理
web工程師是最近5年剛剛興起的一門高薪職業，人們的專注度越來越高。那麼前端除了學習html標籤之外還需要掌握什麼知識點呢？為大家整理了乙個和html標籤密不可分的知識要點 css樣式常用屬性 css 常用屬性 z index auto 預設值 檢索或設定物件的層疊順序。並級的物件，此屬性引數值越大...
CSS樣式整理
不同裝飾作用同乙個元素，其值會替換，而不積累。線性漸變 background linear gradient to top，green，red，徑向漸變 font face 字型檔案路徑 用邊框畫三角形 none 不指定影象 無序列表 ul 即unorder list 有序列表 ol 即order ...