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佈局詳解:

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章