技術標籤：flex 右對齊

flex佈局，“容器” 中的flex-flow 屬性是一個簡寫屬性，是筆記1和筆記2中提及的flex-direction屬性和flex-wrap屬性的簡寫形式，預設值是row nowrap(flex-direction和flex-wrap的預設值) 這屬性沒什麼好說的。這裡的重點是justify-content屬性。

justify-content屬性定義了專案在主軸上的對齊方式，而主軸是flex佈局中對flex佈局空間的定義，在flex-direction屬性中定義的就是主軸(專案的排列方向)，這裡就一預設主軸進行展示。

justify-content有5個取值，flex-start(預設值，左對齊)、flex-end(右對齊)、center(居中)、space-between(兩端對齊，“專案”之間的間隔相等)、space-around(每個“專案”兩側的距離相等，所以“專案”之間的距離是兩邊“專案”和邊框距離的兩倍)，下面照例是一段html程式碼

附上CSS樣式

.container{ width:1000px; padding:20px 0; display: flex; background: green ;}.item{ display: flex; flex-shrink: 0; justify-content: center; height:100px; line-height:100px; color:red; font-size: 60px;}

上面的css程式碼中，“容器”是沒有加上justify-content屬性，沒有加上它就會給這個屬性一個預設值flex-start。就是說沒有寫上justify-content屬性和寫上justify-content：flex-start是一樣的效果。下面是效果圖

justify-content：flex-start

看起來是不是有點眼熟啊，是不是想到了float：left(向左浮動)，表現效果是一樣的。下面更改justify-content的取值—— justify-content：flex-end

justify-content：flex-end

這次是和float：right(向右浮動)效果是一樣的。當然如果這裡設定的是浮動我們看到的3,2,1的排列才對，flex當然也可以做到，請複習筆記1。接著是justify-content：center

justify-content：center

居中顯示，這是一個面試官很愛問的問題，flex的justify-content：center就是答案的一種，配合下一個屬性align-items:center,就可以實現一個垂直居中，水平居中的效果(“容器”設定高度)。為了展示，給“容器”加上高度300px和align-items:center，效果如下

垂直劇中，水平居中

再接著回到justify-content屬性的第四個取值——space-between，效果也是直接上圖

justify-content：space-between

“專案”兩兩之間保持一樣的距離，當你需要這種佈局，直接使用，就不用花盡心思去計算，然後為“專案”新增對應的外邊距之類的操作了。

最後是justify-content屬性的最後一個取值——space-around，效果圖給上

justify-content：space-around

相當於為每個“專案”加上一個外邊距(但是這個外邊距等於多少不用我們計算)，然後“專案”總寬度和“容器”寬度一致。所以，我們可以看到邊沿的“專案”和容器邊框的距離是專案之間的距離的一半，因為1+1=2。

以上就是筆記3的全部內容，謝謝觀看。