CSS Flex佈局個人規範實踐(CSS Flexible Box Layout)

摘要:

• Updated:2018/11/28
• 個人/團隊Flex佈局書寫規範建議總結
• 個人Flex佈局最佳實踐

---

個人規範:

• 使用縮寫的屬性進行編碼(flex-flow,flex),不使用flex-direction,flex-wrap,flex-grow,flex-shrink,flex-basis
• flex佈局代碼書寫於最前,後緊跟width,height及其它盒模型屬性
• flex屬性書寫順序display:flex,flex-flow,justify-content,align-items,align-content,flex,order,align-self

個人最佳實踐:

1. (水平導航欄)水平分佈,部分元素向左堆疊,部分元素向右堆疊

  

<div style="display:flex">
  <button>item-1</button>
  <button>item-2</button>
  <button style="margin-left:auto">item-3</button>
  <button>item-4</button>
  <button>item-5</button>
</div>

2. (垂直導航欄)垂直分佈,部分元素向上堆疊,部分元素向下堆疊

  

<div style="display:flex;flex-flow:column">
  <button>item-1</button>
  <button>item-2</button>
  <button style="margin-top:auto">item-3</button>
  <button>item-4</button>
  <button>item-5</button>
</div>

3.磁貼卡片佈局

  

<div style="display:flex;flex-flow:column wrap">
  <button style="flex-basis:100%;width:30%">item-1</button>
  <button style="width:70%">item-2</button>
  <button>item-3</button>
  <button>item-4</button>
</div>

 

Flexbox佈局詳解: