🖥️ The Only CSS Layout Guide You'll Ever Need | EdRoh

Box

• 拿到設計稿的第一件事情就是用 box 將一切視覺化。
• CSS Box Model 預設使用 content-box ，此時只包含 content。如果你改用 border-box 則包含 border, padding, content。
• 將版面切成 box 的順序是由上而下，由左而右 (由頂部開始橫向佈局)。因為 div 預設是佔滿一整 row (block element)。
• 所有的 box 都有父子關係，理解這個關係有助於使用 flexbox 與 grid 系統。
• 不要再使用 float 去定位版面了，預設先考慮 flexbox。
• 有些人會使用絕對定位去排版，這樣就達不到 RWD 設計。

Flexbox

• Parent attributes

  .parent {
    display: 'flex';
    flex-direction: 'row' | 'row-reverse' | ... (more);
    flex-wrap: 'nowrap' | 'wrap' | 'wrap-reverse';
    flex-flow: [flex-direction and flex-wrap values];
    justify-content: 'flex-start' | 'flex-end' | ... (more);
    align-items: 'stretch' | 'flex-start' | ... (more);
    align-content: 'stretch' | 'flex-start' | ... (more);
  }
  

• Parent attributes 真正需要關注的只有：

  .parent {
    display: 'flex';
    justify-content: 'center' | 'space-between';
    align-content: 'center' | 'space-between';
  }
  

• Child attributes

  • flex-grow
  • flex-basis

• Flex Cheatsheet