頁面布局

• 靜態(tài)布局(Static Layout)
  使用CSS邏輯像素單位px進(jìn)行定寬布局，是PC端最常見形式。
• 流式布局(Liquid Layout)
  流式布局的特點是頁面元素寬度按屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變，典型代表是柵格系統(tǒng)。頁面主要劃分區(qū)域尺寸使用百分比，并搭配min-*、max-*屬性屬性。
• 自適應(yīng)布局(Adaptive Layout)
  創(chuàng)建多個靜態(tài)布局，每個靜態(tài)布局對應(yīng)一個屏幕分辨率范圍。屏幕分辨率改變時可以切換為不同的靜態(tài)布局，頁面元素位置會發(fā)生改變。但每個靜態(tài)布局中，頁面元素不會隨著窗口大小的調(diào)整發(fā)生變化。實現(xiàn)方式是使用@media媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同樣式。
• 響應(yīng)式布局(Responsive Layout)
  響應(yīng)式設(shè)計目標(biāo)是確保一個頁面在所有終端都能顯示出令人滿意的效果，通常會糅合流式布局、彈性布局，再搭配媒體查詢使用。會分別為不同屏幕分辨率定義布局，同時在每個布局中應(yīng)用流式布局理念，即頁面元素寬度隨窗口調(diào)整而自動適配。也就是創(chuàng)建多個流體式布局，分別對應(yīng)一個屏幕分辨率范圍。可以將響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計理念的融合。
• 彈性布局(Flexiable Layout)
  以REM或RM為單位的布局，適用于移動端且設(shè)計對高度和元素間距要求不高。采用REM+JS方式只是寬度自適應(yīng)，高度并沒有做到自適應(yīng)。對高度或元素間距要求較高的設(shè)計，并不合適。

設(shè)備像素

• 設(shè)備物理像素（Physical Pixel）
  表示每英寸所擁有的像素數(shù)量，一個物理像素是顯示屏上最小的物理顯示單元。物理像素數(shù)值越大，代表屏幕能夠以更高的密度來顯示圖像。在操作系統(tǒng)調(diào)度下，每個設(shè)備像素都擁有自己的色值與亮度值。
• 設(shè)備獨立像素（Density-Independent Pixel，DIP）
  設(shè)備獨立像素又叫做密度無關(guān)像素，可以認(rèn)為是計算機(jī)坐標(biāo)系統(tǒng)中的一個點，這個點代表一個可以由程序使用的虛擬像素（如CSS中的像素），然后會根據(jù)相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
• CSS像素
  CSS像素是一個抽象的的單位，主要使用在瀏覽器中用來精確度量頁面內(nèi)容。一般而言，CSS像素又稱為與設(shè)備無關(guān)的像素，即設(shè)備獨立像素DIP。
  頁面中CSS中單位默認(rèn)使用的是像素px，CSS中的像素是一個相對值，在不同設(shè)備屏幕中對應(yīng)著不同的設(shè)備像素。
  例如：在PC中1個CSS像素等于1個物理像素。而在3.5英寸的iPhone3GS分辨率320 x 480中1個CSS像素等于1個物理像素，而在3.5英寸的iPhone4S分辨率640 x 640中1個CSS像素等同于2個物理像素。這也就意味著相同一塊3.5英寸的區(qū)域內(nèi)像素多了一倍。
• 設(shè)備像素比（Device Pixel Ratio，DPR）
  設(shè)備像素比是指物理像素和設(shè)備獨立像素的對應(yīng)關(guān)系，某在某方向中，設(shè)備像素比的計算公式是：設(shè)備像素比 = 物理像素 / 設(shè)備獨立像素?？赏ㄟ^JavaScript中的window.devicePixelRatio獲取當(dāng)前設(shè)備的DPR。

• 位圖像素
  一個位圖像素是柵格圖像（如jpg、png、gif等）最小的數(shù)據(jù)單元，每個位圖像素包含自身的顯示信息，如顯示位置、顏色值、透明度等。理論上，一個位圖像素對應(yīng)于一個物理像素，圖像才能得到完美清晰的展示。

位圖像素

例如：對于DPR=2的Retina屏幕而言1個位圖像素對應(yīng)于4個物理像素，由于單一位圖像素不可再分割，所以只能就近取色，從而導(dǎo)致圖片模糊。所以對于圖片清晰度問題，較好的方案是提供兩倍圖@x2。

像素密度PPI

像素密度表示設(shè)備屏幕能夠顯示的設(shè)備獨立像素DIP的數(shù)量，屏幕顯示的像素數(shù)量越多畫面也就越精細(xì)，同時同樣屏幕區(qū)域能夠顯示的信息也就越多。

屏幕由像素點組成，每個像素點發(fā)出不同顏色的光，進(jìn)而構(gòu)成界面。而屏幕的物理尺寸與像素尺寸是不成比例的。不同尺寸的手機(jī)屏幕擁有不同的分辨率，分辨率實際上是手機(jī)像素的寬高尺寸。

像素密度（pixels per inch,PPI或DPI）表示每英寸長度上排列的設(shè)備獨立像素點DIP的個數(shù)，1英寸等于2.53厘米。像素密度PPI越高則表示屏幕分辨率越高進(jìn)而屏幕顯示越精細(xì)。Retine屏幕比普通屏幕清晰的原因，是因為它的像素密度是普通屏幕的數(shù)倍。

像素密度

例如：3.5英寸的iPhone手機(jī)屏幕

• iPhone 3GS的屏幕分辨率為320 x 480
• iPhone 4S的屏幕分辨率為 640 x 960

3.5英寸的iPhone

日常所說的屏幕尺寸，實際是指屏幕對角線的長度。計算像素密度首先需要計算設(shè)備屏幕對角線等效像素，然后除以對角線長度。例如HTC G7分辨率為480x800，3.7英寸，計算出像素密度為252PPI。

像素密度PPI = 平方像素寬加平方像素高之和開平方的結(jié)果，再除以屏幕對角線的英寸數(shù)。

iPhone屏幕尺寸

密度決定比例

通過計算像素密度PPI可以得知設(shè)備屏幕屬于哪個密度區(qū)間，因為不同密度區(qū)間對應(yīng)著不同的默認(rèn)縮放比例。

image.png

縮放比

頁面寬高

頁面寬高

• 頁面可見區(qū)域?qū)捀撸?code>document.body.clientWidth || document.body.clientHeight
• 頁面正文區(qū)域?qū)捀撸?code>document.body.scrollWidth || document.body.scrollHeight（包含滾動條長度）
• 頁面被卷左上區(qū)域：document.body.scrollLeft || document.body.scrollTop

視區(qū) Viewport

通俗來說視區(qū)Viewport就是瀏覽器上用來顯示頁面的區(qū)域，也就是說，瀏覽器的實際寬度和手機(jī)寬度不一樣，無論手機(jī)寬度是320px或640px，在手機(jī)瀏覽器內(nèi)部寬度始終會是瀏覽器本身的視區(qū)。

視區(qū)

現(xiàn)代瀏覽器都會給自身的視區(qū)提供一個默認(rèn)值，大多會以980px或1024px為主。在移動端視區(qū)默認(rèn)一般來說是會大于手機(jī)屏幕的，所以當(dāng)在桌面瀏覽器正常顯示的頁面，會以960px設(shè)計主區(qū)域。放到移動端就會出現(xiàn)橫向滾動條，因此會專門會給瀏覽器設(shè)計移動端的頁面。

移動端瀏覽器會將頁面放在一個虛擬的窗口viewport中，通常這個虛擬的窗口會比屏幕寬，這樣就不用將每個頁面擠到很小的窗口中，以防止破壞沒有針對手機(jī)瀏覽器優(yōu)化的網(wǎng)頁布局，用戶可以通過平移或縮放來查看頁面中的不同部分。

頁面中視區(qū)viewport是可繪制的區(qū)域，雖然視區(qū)的可視面積和屏幕尺寸相匹配，但視區(qū)頁由自己的尺寸，用來確定頁面中的像素數(shù)量。

在iPhone和Android平臺中WebKit內(nèi)核的歷覽器使用980像素寬的視見區(qū)或邏輯尺寸，相當(dāng)于viewport中的width=980px。當(dāng)頁面加載后，頁面內(nèi)容通常被完全縮放以便整個頁面都可見，盡管內(nèi)容會被縮放的非常小且不可讀。

在Web頁面中，可通過JS動態(tài)獲取相關(guān)參數(shù)。

// 獲取布局視口寬度
document.documentElement.clientWidth

// 獲取展示視口即瀏覽器可視區(qū)域?qū)挾?window.innerWidth

// 獲取設(shè)備像素比DPR
window.devicePixelRatio

根據(jù)目前市場主流移動終端，統(tǒng)計設(shè)備獨立像素后，移動端H5設(shè)計稿推薦尺寸為640 x 1136、750 x 1334。

• 背景圖片采用background-size:cover實現(xiàn)
• 設(shè)計稿不要將重要內(nèi)容放在太偏下或偏上位置

除去瀏覽器全屏顯示，幾乎所有情況下均會存在頂部狀態(tài)欄和導(dǎo)航欄。根據(jù)iPhone標(biāo)準(zhǔn)，狀態(tài)欄和導(dǎo)航欄的獨立像素高度分別為40px和88px。Android平臺可以更改狀態(tài)和導(dǎo)航欄高度可取默認(rèn)值48px和100px為準(zhǔn)。在網(wǎng)頁中就會將頁面內(nèi)容向下擠入盲區(qū)，根據(jù)不同的布局方式可能會擠出視口，也就是可視區(qū)域之下。因此取兩個平臺的最大值148。因此設(shè)計稿要盡量保證單頁下沒有重要內(nèi)容。如果要在所有屏幕上將重要內(nèi)容顯示完全，需要注意市面上存在的小尺寸屏幕，絕對部分智能機(jī)分辨率在640 x 960之上，因此只要重要內(nèi)容放在盲區(qū)之上即可。計算出的最安全高度為812 = 960 - 148。

視區(qū)分類

簡單來說視區(qū)Viewport是嚴(yán)格等于瀏覽器的窗口，在桌面瀏覽器中視區(qū)就是瀏覽器窗口的寬高，但在移動設(shè)備上由于視區(qū)太窄，為了更好的為CSS布局服務(wù)，所以提供了兩個視區(qū)，分別是可見視區(qū)Visual Viewport和布局視區(qū)Layout Viewport。

視區(qū)

• 布局視區(qū)Layout Viewport

如果將移動設(shè)備瀏覽器的可視區(qū)域設(shè)置為Viewport，某些網(wǎng)站會因為Viewport太窄而顯示錯亂，所以瀏覽器會默認(rèn)將Viewport設(shè)置為一個較寬的值，比如980px，使得為桌面瀏覽器設(shè)計的網(wǎng)站也能在移動設(shè)備瀏覽器上正常顯示。這個瀏覽器默認(rèn)的Viewport也就是Layout Viewport布局視區(qū)。布局視區(qū)的寬度可以使用JavaScript的document.documentElement.clientWidth獲取。移動設(shè)備中默認(rèn)的視區(qū)就是Layout Viewport。

瀏覽器內(nèi)置布局視區(qū)寬度

• 可見視區(qū) Visual Viewport

布局視區(qū)的寬度是大于瀏覽器可視區(qū)域的寬度的，因此需要一個Viewport來表示瀏覽器可視區(qū)域大小，這個Viewport也就是可見視區(qū)Visual Viewport，可見視區(qū)可使用JavaScript的document.documentElement.innerWidth獲取。

視區(qū)設(shè)置

<meta 
name="viewport" 
content="
width = [pixel_value | device-width],
height = [pixel_value | device-height],
initial-scale = float_value,
minimum-scale = float_value,
maximum-scale = float_value,
user-scalable = [yes | no],
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"
/>  

• width = device-width 視口寬度，device-width表示設(shè)備屏幕寬度。
• height = device-height 視口高度，device-height表示設(shè)備屏幕高度。
• initial-scale = float_value 視口初始縮放比例，取值范圍[0.0 - 10.0]，為1時表示原始尺寸。
• minimum-scale = float_value 視口最小縮放比例，取值范圍[0.0 - 10.0]，為1時表示原始尺寸。
• maximum-scale = float_value 視口最大縮放比例，取值范圍[0.0 - 10.0]，為1時表示原始尺寸。
• user-scalable = [yes | no] 用戶是否允許調(diào)整縮放比例
• target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 用于改變設(shè)備的默認(rèn)縮放，medium-dpi是默認(rèn)值。

完美視區(qū) Ideal Viewport

Ideal Viewport是一個能完美適配移動設(shè)備的Viewport，首先無需縮放和橫向滾動條就能正常查看頁面所有內(nèi)容，其次顯示的文字、圖片大小合適。比如14px的文本不會因為一個高密度像素的屏幕而顯示的太小或無法看清。無論在何種密度屏幕、何種分辨率下，顯示出來的大小都差不多，這個Viewport也就是Ideal Viewport。

Ideal Viewport并沒有一個固定的尺寸，不同的設(shè)備擁有不同的尺寸。比如在IPhone設(shè)備中Ideal Viewport寬度是320px，無論屏幕寬度是320還是640的。Ideal Viewport的意義在于，無論在何種分辨率下，針對Ideal Viewport而設(shè)計的頁面無需縮放和橫向滾動條都可以完美地呈現(xiàn)給用戶。

移動設(shè)備中默認(rèn)的視區(qū)是Layout Viewport，在進(jìn)行移動設(shè)備頁面開發(fā)時則需要Ideal Viewport。要得到完美視區(qū)，需設(shè)置meta標(biāo)簽。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

該meta標(biāo)簽的作用是讓當(dāng)前視區(qū)寬度等于設(shè)備寬度，同時不允許用戶手動縮放。minimum-scale=1.0與maximum-scale=1.0并不是必需的。但width = device-width則是必須的，以保證不會出現(xiàn)橫向滾動條。

width能夠控制默認(rèn)布局視區(qū)Layout Viewport的寬度，若不指定則默認(rèn)會是980px或1024px，這個值會由設(shè)備自身所決定。當(dāng)把布局視區(qū)寬度設(shè)置為移動設(shè)備寬度width = device-width時，此時布局視區(qū)將會變成完美視區(qū)。

其實要將當(dāng)前視區(qū)寬度設(shè)置為完美視區(qū)寬度，既可以設(shè)置width = device-width也可以設(shè)置initial-scale = 1.0，但是單單設(shè)置width = device-width會導(dǎo)致iPhone、iPad設(shè)備中橫豎屏不分，單單設(shè)置initial-scale = 1.0則會導(dǎo)致IE中橫豎屏不分。所以都以豎屏的完美視口寬度為標(biāo)準(zhǔn)，最完美的寫法時兩則都寫上去，width = device-width解決iPhone、iPad缺陷，initial-scale = 1.0則解決IE的缺陷。

視區(qū)單位 vm & vh

CSS3新增視區(qū)單位vm和vh，在移動端iOS8+和Android4.4+獲得支持。

• vm視區(qū)viewport寬度的1/100，即1vm等于視區(qū)寬度的1%。
• vh視區(qū)viewport高度的1/100，即1vh等于視區(qū)高度的1%。
• vmin表示選取vm和vh中最小的那個
• vmax表示選擇vm和vh中最大的那個

視區(qū)單位

設(shè)備像素比 DPR

設(shè)備像素比定義了物理像素與設(shè)備獨立像素之間的對應(yīng)關(guān)系，計算公式為：設(shè)備像素比 = 物理像素 / 設(shè)備獨立像素。

在CSS中可通過以下方式進(jìn)行媒體查詢，針對不同DPR設(shè)備做出樣式適配。

-webkit-device-pixel-ratio
-webkit-min-device-pixel-ratio
-webkit-max-device-pixel-ratio

在JavaScript中可通過window.devicePixelRatio獲取當(dāng)前設(shè)備的DPR。

window.devicePixelRatio

在Ratina高清設(shè)備屏幕中一個CSS像素對應(yīng)4個物理像素

• 普通屏幕：1個CSS像素對應(yīng)1個物理像素（1:1）
• Retine屏：1個CSS像素對應(yīng)4個物理像素（1:4）

DPR

Web頁面設(shè)置視口后，頁面與屏幕是1:1顯示，移動設(shè)備都具有設(shè)備像素比DPR，當(dāng)DPR=2時移動設(shè)備上的一個CSS像素由4個物理像素點組成。

• dpr = 1 如PC端，則html的font-size為50px，此時 1rem = 50px， viewport 的 initial-scale 、minimum-scale 和 maximum-scale 都為 “1.0” 。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />  

• dpr = 2 如iPhone 5 和 6，則html的font-size為100px，此時 1rem = 100px， viewport 的 initial-scale 、minimum-scale 和 maximum-scale 都為 “0.5” 。
• dpr = 3 如iPhone 6 sp，則html的font-size為150px，此時 1rem = 150px； viewport 的 initial-scale 、minimum-scale 和 maximum-scale 都為 “0.3333333333”。

安卓客戶端限制了 viewport 設(shè)置的縮放屬性，讓客戶端放開限制就行，但是由于市場上的app版本還是不支持，所以需要做兼容性處理。

iPhone6 上有1px 的滾動條，最后處理方案是通過 viewport 中的 maximum-scale 的值加了0.1，由于設(shè)置了user-scalable=no，maximum-scale 的值加0.1并不會有什么影響。

通過JS動態(tài)獲取移動設(shè)備的設(shè)備像素比，通過設(shè)備像素比來計算并設(shè)備Web頁面中html標(biāo)簽的字體大小font-size以及縮放比例。

例如：動態(tài)設(shè)置 html 的font-size, 同時根據(jù)設(shè)備DPR調(diào)整頁面的縮放值，進(jìn)而達(dá)到高清效果。

'use strict';

/**
 * @param {Boolean} [normal = false] - 默認(rèn)開啟頁面壓縮以使頁面高清;  
 * @param {Number} [baseFontSize = 100] - 基礎(chǔ)fontSize, 默認(rèn)100px;
 * @param {Number} [fontscale = 1] - 有的業(yè)務(wù)希望能放大一定比例的字體;
 */
const win = window;
export default win.flex = (normal, baseFontSize, fontscale) => {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    // 如果非iOS, 非Android4.3以上, 非UC內(nèi)核, 就不執(zhí)行高清, dpr設(shè)為1;
    dpr = 1;
  }
  const scale = normal ? 1 : 1 / dpr;
  // 自動設(shè)置viewport
  let metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  // 默認(rèn)dpr=2時html的font-size=100px，這樣1rem=100px利于px和rem之間的轉(zhuǎn)換。
  doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};

REM

rem全稱font size of the root element是指相對于根元素的字體大小的相對單位，計算規(guī)則依賴于根元素。

rem是通過根元素進(jìn)行適配的，web中根元素是指html，所以通過設(shè)置html的字體大小即可控制rem的大小。

REM布局的核心是設(shè)置好根html元素的字體大小font-size，為了防止在高清屏下像素不夠用而導(dǎo)致模糊，當(dāng)拿到移動設(shè)計稿時，移動設(shè)計稿一般會以iPhone5設(shè)備寬320px或iPhone6設(shè)備寬375px為基準(zhǔn)，制作出兩倍寬的設(shè)計稿，即640px或750px。

例如：設(shè)置html標(biāo)簽的font-size:10px，6rem即6*10px。

html{
  font-size:10px;
}
.btn{
    width:6rem;
    height:3rem;
    line-height:3rem;
    font-size:1.2rem;
    border-radius:.5rem;
    display:inline-block;
    background-color:#06c;
    color:#fff;
    text-decoration:none;
    text-align:center;
}

rem適用于WebApp，出于兼容性考慮，WebApp下使用rem更加能凸價值和功能。

使用CSS的媒體查詢控制

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

移動UI設(shè)計稿會采用iPhone寬度作為標(biāo)準(zhǔn)

• 設(shè)計稿基于iPhon4/5 橫向分辨率為640 頁面body元素的width為 640 / 100 = 6.4rem
• 設(shè)計稿基于iPhon6 橫向分辨率為750 頁面body元素的width為 750 / 100 = 7.5rem

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

使用JS控制Web頁面文字大小使其自適應(yīng)屏幕

//Chrome包括其內(nèi)核的webview有最小字體12px的限制，建議以1080px寬度下100px作為1rem基準(zhǔn)，以10px為基準(zhǔn)縮放程度極其有限
(function(doc, win){
    var docEl = doc.documentElement,
        resizeEvent = "orientationchange" in window ? "orientationchange" : "resize",
        resizeHandler = function(){
            var clientWidth = docEl.clientWidth;
            if(!clientWidth){
                return;
            }
            // 根據(jù)設(shè)計調(diào)整
            docEl.style.fontSize = 20*(clientWidth/320) + "px";
        };
    //添加事件
    if(!doc.addEventListener){
        return;
    }
    win.addEventListener(resizeEvent, resizeHandler, false);
    //注冊了document的'DOMContentLoaded'事件，使得打開網(wǎng)頁時在內(nèi)容加載完之后才改變rem。
    doc.addEventListener("DOMContentLoaded", resizeHandler, false);
})(document, window);

使用rem布局的本質(zhì)是等比縮放，一般是基于寬度。

將屏幕寬度均分100份，每一份的寬度使用x表示，即x=屏幕寬度/100，如果將x作為單位，x前面的數(shù)值代表屏幕寬度的百分比。想要屏幕元素隨著屏幕寬度等比縮放，只需要確定x單位，可通過CSS3中的rem來實現(xiàn)?？赏ㄟ^JS設(shè)置HTML字體大小等于屏幕寬度的百分之一。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + "px";

若UE設(shè)計稿寬度尺寸為640px，設(shè)計稿中某元素寬度為100px，則可以計算出100 / 640px * 100px = 15.625。

最佳實踐：px2rem移動端自適應(yīng)方案 https://github.com/imochen/hotcss

EM

字體大小不能使用rem，因為字體大小和字體寬度并不是線性關(guān)系，所以字體大小不能使用rem。由于設(shè)置根元素字體大小會影響所有沒有設(shè)置字體大小的元素，因為字體大小是會繼承的，可以在body上做字體修正。

如何實現(xiàn)字體的響應(yīng)式，可通過修改body字體大小，同時設(shè)置字體大小使用em單位。

媒體布局

彈性布局Flex