Web前端html彈性盒子（flex）佈局，這些你必須要知道

作為一名前端程式設計師，彈性盒子的知識，是很常用也是很重要的，我們一起來看一下

1.當flex-direction:row時，這時水平軸為主軸，垂直軸為側軸

1）justify-content：調整水平軸上的對齊方式；

2）align-content：調整垂直軸上各行間的對齊方式（僅在多於一行時有效）；

3）align-items：調整

每一行裡各

個item垂直軸上的對齊方式；

2.當flex-direction:column時，這時垂直軸為主軸，水平軸為側軸

1）justify-content：調整垂直軸上的對齊方式；

2）align-content：調整水平軸上各行間的對齊方式（僅在多於一行時有效）；

3）align-items：調整

每一行裡

各個item水平軸上的對齊方式；

1.

flex-wrap 容器內元素的換行(預設不換行)

Wrap： ［rp］ 包，

flex：彎曲

1：flex-wrap： nowrap； （預設）元素不換行，比如：一個div寬度100%，設定此屬性，2個div寬度就自動變成各50%；

2：flex-wrap： wrap； 元素換行，比如：一個div寬度100%，設定此屬性，第二個div就在第二行了；

2。

justify-content 元素在主軸（頁面）上的

排列

Justify： ［dstfa］ 使每行排齊

Content：內容

center；： ［sent（r）］ 中心

Space：［spes］ 空間

around： ［rand］ 圍繞

1：justify-content ： center；元素在主軸（頁面）上居中排列

2：justify-content ： flex-start；元素在主軸（頁面）上由左或者上開始排列

3：justify-content ： flex-end；元素在主軸（頁面）上由右或者下開始排列

4：justify-content ： space-between；元素在主軸（頁面）兩端開始排列

5：justify-content ： space-around；每個元素兩側的間隔相等。

3.

align-items 元素在主軸（頁面）

當前行的

橫軸（縱軸）方向上的

對齊方式

align ：［lan］ 排列

1：靠上對齊

2：align-items ： flex-end； 靠下對齊

3：align-items ： center； （居中對齊）

4。

align-content （垂直）

注意：這個和justify-content ： center；的不同

1）justify-content ： center；在確定橫軸或縱軸的情況下對整體在確定的軸上排列

2）align-content ：調整垂直軸上各行間的對齊方式（僅在多於一行時有效）；如預設flex：row橫軸排列，但是橫軸一行排不下，

這時允許換行，這時用

align-content

來操作縱向排列

示例程式碼：

不用：align-content時：

結果：

加上align-content時：

結果：

1：align-content： flex-start； 元素位於容器的開頭。各行向彈性盒容器的起始位置堆疊。

2：align-content： flex-end； 元素位於容器的結尾。各行向彈性盒容器的結尾位置堆疊。

3：align-content： stretch； 元素位於容器的中心。各行向彈性盒容器的中間位置堆疊。

stretch ：［stret］ 拉長

4：align-content： center； 預設值。元素被拉伸以適應容器。各行將會伸展以佔用剩餘的空間。如果剩餘的空間是負數，該值等效於‘flex-start’。

5：align-content： space-between；元素位於各行之間留有空白的容器內。各行在彈性盒容器中平均分佈。

6：align-content： space-around；元素位於各行之前、之間、之後都留有空白的容器內。各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於‘center’。

flex常見屬性總結

justify-content：center； //水平居中

align-items：center； //垂直居中