[Back To Basic] CSS Flexbox 1/2

Flexbox 出來之前的4種排版模式

• Block: 區塊
• Inline: 段落文字
• Table: 二維表格資料
• Positioned: 明確定位的元素

Flexbox

不使用 float 和 positioning，也能更容易設計出更有彈性的版面

使用方法

Step1 容器設定

.container {

  display: flex;

}

Step2 屬性設定

flex-direction: 排列方向

flex-wrap: 擠壓時是否換行

flex-flow: flex-direction flex-wrap

justify-content: 水平對齊

align-items: 垂直對齊

source code