第 6 節： Flex 網頁排版技巧

44. Flex 外層屬性 (container) 介紹上集

在父元素套用以下程式碼，讓該元素所包覆的區塊元素能夠並排：

display: flex;

47. flex-direction – 決定 flex 軸線

以下語法可以決定主軸的排列方式：

• flex-direction: row（預設）
• flex-direction: row-reverse
• flex-direction: column
• flex-direction: column-reverse

48. justify-content – 決定主軸對齊方式

以下語法可以決定主軸的對齊方式：

• justify-content: flex-start（預設）
• justify-content: flex-center
• justify-content: flex-end
• justify-content: space-around
• justify-content: space-between
• justify-content: space-evenly

六角學院 flex 工具

50. flex-wrap – 決定換行屬性

當一個容器內的子元素的寬度超出父元素的寬度時，就可以使用以下程式碼，將超出的元素換行：

flex-wrap: wrap;

51. align-items – 交錯軸對齊方式

以下語法可以決定交錯軸的對齊方式：

• align-items: flex-start（預設）
• align-items: center
• align-items: flex-end
• align-items: baseline
• align-items: stretch