相信剛開始學習開發小程式的初學者一定對介面的佈局很困擾，不知道怎麼佈局，怎麼擺放位置，其原因是不瞭解CSS樣式的屬性，所以，今天程式碼君打算寫一篇關於CSS的教程，給大家普及一下。
說起CSS佈局，首先要講解的就是FLex佈局，這個可以說是一個萬能鑰匙，遇到什麼複雜的佈局，都可以通過Flex佈局搞定，為了方便大家理解Flex屬性，我將會一步步解析FLex的屬性，並附上效果圖
基本概念
採用 Flex 佈局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 專案（flex item），簡稱"專案"。
Flex容器屬性
Flex總共有6個屬性
- flex-direction 設定排列方向
- flex-wrap 內容滿一行，是否換行
- flex-flow flex-direction屬性和flex-wrap屬性的簡寫形式
- justify-content 左右對齊方式
- align-items 上下對齊方式
- align-content 多行上下對齊方式
flex-direction決定了item裡面排列的方向，有下面四個屬性值
- row（預設值）：橫向排序，從左邊起開始排列item。
- row-reverse：橫向排序，從右邊起開始排列item。
- column：縱向排列，從頂部開始排列item。
- column-reverse：縱向排列，從底部開始排列item。
預設情況下，專案都排在一行上不換行，flex-wrap有三個屬性值
- nowrap （預設）不換行
- wrap 如果第一行滿了，換行
- wrap-reverse 換行，第一行在下方
justify-content用來定義item 左右對齊的方式，有以下五種
- flex-start（預設值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：等距對齊，兩端對齊，item之間的間隔都相等。
- space-around：每個item兩側的間隔相等。所以，item之間的間隔比item與邊框的間隔大一倍。
align-items用來定義item上下對齊的方式，也有五種
- flex-start：向上對齊
- flex-end：向下對齊。
- center：居中。
- baseline: item的第一行文字的基線對齊。
- stretch（預設值）：如果item未設定高度或設為auto，將佔滿整個容器的高度。
align-content是多行對齊方式，如果只有把一行，此屬性不起作用
- flex-start：向上對齊。
- flex-end：向下對齊。
- center：居中。
- space-between：等距對齊，兩端對齊，item之間的間隔都相等。
- space-around：每個item兩側的間隔相等。所以，item之間的間隔比item與邊框的間隔大一倍。
- stretch（預設值）：所有item佔滿整個容器。
總結
好了，這些就是Flex的全部屬性，最後告訴一下讀者，不要只看文章，一定要跟著教程，去實戰一下，只有這樣，才可以對屬性瞭解透徹，如果你掌握這些，相信市面上的小程式基礎佈局，你都可以實現的。