語法相關

Flexbox

第一個方法是: 在父容器上套用flex進行操作。

flex的概念是 會有一個容器(container)包住物件(item)，然後可以控制內部物件的排版方式。
→ 所有的 內容物(item) 都是 彈性物件(flex item)。

flexbox垂直置中的方法，是在container加上置中的控制項，
以範例來說就是加在.parent：

.parent {
  display: flex;
  /* 水平置中 */
  justify-content: center;    
  /* 垂直置中 */
  align-items: center;        
}

其中align-items: center;也可以用這兩行替換，效果一樣:

.parent {
  display: flex;
  /* 水平置中 */
  justify-content: center;    
  /* 垂直置中 */
  align-content: center;      
  flex-wrap: wrap;
}

• align-content
  • 決定在多行情況下，items垂直方向的分布情形。(對只有一行的items無效)
  • 在flex-wrap: nowrap;的情況下無效，所以在這裡要再加上flex-wrap。
• flex-wrap
  • nowrap(預設值)會將所有的flex items壓縮在同一行。
  • 設值為wrap，則不會壓縮items，如果items過多就換行。