搭建移動端佈局框架:重拾flex

0x001 概述

---

提及關於 flex的文章。我以爲啊除了阮一峯老師，再也無人能出其右了，因此這裏也只是聊作記錄。

0x002 基本概念

1. Flex container：元素添加了flex屬性後就變成了flex容器,
2. Axes ：Flex Container的座標軸，分爲main axes(主軸)和cross axes（交軸）

3. Flex item：父元素一旦添加flex屬性，子元素將直接變成flex子元素，將再也不顯示默認佈局,而是沿着Flex container的主軸順序排列,若是改變主軸方向,則子元素的排列方向也將會改變

   • 默認樣式(box定義了一個100*100的盒子，container定義了一個500*100的盒子，bg*只是背景顏色)

   <div class="container ">
       <div class="box bg1"></div>
       <div class="box bg2"></div>
       <div class="box bg3"></div>
    </div>

   

   • 父元素添加flex屬性

   <div class="container flex">
       <div class="box bg1"></div>
       <div class="box bg2"></div>
       <div class="box bg3"></div>
   </div>

0x003 容器屬性

1. 屬性簡介

   • flex-direction：
   • flex-wrap：
   • flex-flow：
   • justify-content：
   • align-items：
   • align-content：

2. flex-direction:
   這個屬性能夠改變主軸的方向,子元素沿着主軸排列,因此改變主軸方向將會改變子元素的排列方向

   • 初始值: row

   • 可選值:

     • row ：主軸從main start到main end
     • row-reverse ：主軸從main end到main start
     • column ：主軸從cross start到cross end
     • column-reverse：主軸從cross end到cross start

1. flex-wrap
   默認狀況向子元素沿着主軸排列時,若是全部子元素的總大小超過父元素,則子元素將會被壓縮,該屬性能夠改變這種狀況,使之在這種狀況下換行而不壓縮子元素寬度

   • 初始值: nowrap

   • 可選值:

     • nowrap : 不換行
     • wrap : 換行
     • wrap-reverse : 換行並倒序

![clipboard.png](/img/bVKrAI)

1. flex-flow
   是flex-direction和flex-wrap的縮寫形式

   • 初始值: row nowrap

2. justify-content
   該屬性定義了子元素相對父容器的對齊方式

   • 初始值 : flex-start

   • 可選值 :

     • flex-start: 子元素緊靠main start
     • flex-end: 子元素緊靠main end
     • center: 子元素居中對齊
     • space-between: 子元素兩側無邊距,等分居中對齊
     • space-around:子元素等分居中對齊

1. align-items
   該屬性定義子元素在交軸上的對齊方式

   • 初始值 : stretch

   • 可選值 :

     • flex-start : 子元素相對於cross start對齊
     • flex-end : 子元素相對於cross end對齊
     • center : 子元素相對於cross axes居中對齊
     • baseline : 子元素相對於第一個子元素的基線對齊
     • stretch : 若是子元素未設定高度,則拉伸至容器最大高度

1. align-content
   該屬性定義了多條主軸在交軸上的對齊方式

   • 初始值 : stretch

   • 可選值 :

     • flex-start : 多條軸線相對cross start對齊
     • flex-end : 多條軸線相對cross end對齊
     • center : 多條軸線相對cross axes居中對齊
     • space-between : 多條軸線兩端無間距,中間等分間距對齊
     • space-around : 多條軸線等分間距對齊
     • stretch : 若是軸線未設定高度,則拉伸至容器最大高度

0x004 子元素屬性

1. 屬性簡介:

   • order
   • align-self
   • flex-grow
   • flex-shrink
   • flex-basis

2. order
   值越小越靠接近main start

   • 初始值 : 0

1. flex-grow
   該屬性定義子元素佔據剩餘空間的比例,數值越大,佔據的比例越大

1. align-self
   該屬性定義該子元素相對於交軸的對齊方式

   • 初始值 : stretch

   • 可選值 :

     • flex-start : 元素相對於cross start對齊
     • flex-end : 元素相對於cross end對齊
     • center : 元素相對於cross axes居中對齊
     • baseline : 元素相對於第一個子元素的基線對齊
     • stretch : 若是元素未設定高度,則拉伸至容器最大高度

1. flex-shrink
   該屬性定義了元素的縮小比例,數值越大,縮小比例越大,0不縮放

1. flex-basis

   flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。(摘自阮一峯博客原文)

0x004 總結

其實當初看了許多遍阮一峯老師關於flex的博客,可是依舊沒有理解.現在本身整理了一遍,發現了當初理解的誤區,當初認爲,flex-direction讓子元素的排序方式改變,可是其flex-directory的做用是讓主軸和交軸交換位置.從這個方向理解即可以真正理解flex在不一樣方向的佈局.
也就是咱們不能用x軸y軸來理解flex,而是使用主軸和交軸來理解.

0x005 下一篇文章

• 搭建移動端佈局框架:整合flex