接下來就CSS語法，另外一個極其重要的功能就是排版，即針對元件相互間的排列與展示，進行控制，以讓網頁瀏覽者可以看到整齊且經過設計的視覺呈現。

元件的排版，所處理的是各元件彼此間的排列，需與元件內的文字說明有所區隔，初學時，因為兩者個參數語法很相似，容易把兩個搞混，心裡想的是控制元件間的排列，結果卻常常使用到控制元件內的參數，因此這裡主要針對排版，即元件間的排列，進行說明，會用到的是display參數。

display參數，常見的設定有block、flex、grid，以下分別說明。

display: block(區塊元件排版)

設定後，會使得該元件獨佔一整列，並且會自動換行。視覺呈現的效果，會像是「一段段的文章」，每段會分開，即每個元件各自成一列。常見用於<div>、<p>、<h1>等元件。

搭配常見屬性：

• width, height：控制區塊的寬度及高度
• margin, padding：控制區塊的外距及內距
• border：控制區塊加上邊框，如border: 1px solid #ccc;
• background：控制區塊背景顏色，如background-color: lightblue;

block在排版上，相對比較單純，因為他就是強制一個元件占滿一列，所以剩下CSS能控制的，多半是區塊大小、邊框等，針對區塊做美化設計的效果，在初學時，會比較容易理解。

display: flex(彈性盒子排版)

設定後，會使得所設定元件的「子元件」，可以在一條線上排列（1D排列），橫列或直行皆可，並且可以控制子元件的對齊，與空間的平均分配。常見於導覽列、卡片列、表單欄位橫排、按鈕群組。

通常需搭配以下屬性：

• flex-direction：控制子元件排列方向
  • 如flex-direction: row;(控制子元件橫列排列)； flex-direction: column;(控制子元件直行排列)
  • 若無設定時，預設為橫列(row)排列
• justify-content：控制子元件在主軸上的對齊方式
  • 所謂的主軸，要看前面flex-direction的設定而定，若為flex-direction: row，主軸為橫列方向，若為flex-direction: column，主軸為直行方向
  • 可設定為flex-start(預設，靠左對齊)、flex-end(靠右對齊)、center(置中對齊)，以及左右對齊，包括space-between(中間平均間隔)、space-around(左右各半格，平均間隔）、space-evenly(完全平均間隔)
• align-items：控制子元件在垂直軸的對齊方式
  • 所謂的垂直，要看前面flex-direction的設定而定，且與前面所提的justify-content之主軸垂直，若為flex-direction: row，垂直軸為直行方向，若為flex-direction: column，垂直軸為橫列方向
  • 可設定stretch(預設，填滿容器高度)、flex-start(靠上對齊)、flex-end(靠下對齊)、center(垂直置中)、baseline(文字基線對齊)
• gap：控制子元件之間的間距，可以用row-gap、column-gap，分別就橫列、直行間距進行控制

再者，子元件各自也可以進行控制。此乃因為當父層元件設定為彈性盒子後，排版上都會讓子元件填滿整個父層元件空間，因此就有必要針對子元件佔據不同父層元件空間的需求，來進行空間分配。

• flex-grow：設定為1時，該子元件會填滿剩餘空間，數字越大佔據越多空間
• flex-shrink：設定為1時，該子元件在空間不足時，會縮小，數字越大佔據越少空間
• flex-basis：設定子元件的基準大小，優先進行空間分配，再視有無設定flex-grow或flex-shrink進行剩餘或不足的空間分配
• order：控制子元素的排列順序，數字越小，越優先排列出現。

因為在初學時，彈性盒子也是經過很多次的試誤，才比較熟悉怎麼控制，所以還是想要再次說明，display: flex的設定是針對父層元件，但他其實影響的是，父層元件所包含的子元件之間的排列，父層元件的空間分配設定是整體子元件一起設定，若要針對各別子元件安排空間分配，則要到子元件進行設定。

彈性盒子排版，是相當常用到的設定，而且設定完後對於網頁的排版會變得相當整齊，就瀏覽的觀感上會相當舒適。因此是學習CSS，一定要熟悉的設定！