移動web開發之flex佈局（彈性佈局）

1 flex佈局

1.1傳統佈局與flex佈局

傳統佈局

• 兼容性好

• 佈局繁瑣

• 侷限性，不能在移動端很好的佈局

flex彈性佈局

• 操做方便佈局極爲簡單，移動端應用普遍

• PC端瀏覽器支持狀況較差

• IE11或更低版本不支持或僅部分支持

1.2佈局原理

flex是flexible Box的縮寫，意爲「彈性佈局」，用來爲盒狀模型提供最大的靈活性，任何一個容器均可以指定爲flex佈局。

• 當咱們把父盒子設爲flex佈局後（display: flex;），子元素的float、clear和vertical-align屬性都將失效

• 伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局

採用flex佈局的元素，稱爲flex容器（flex container），簡稱「容器」。它的全部子元素自動成爲容器成員，稱爲flex項目（flex item），簡稱「項目」。

總結：就是經過給父盒子添加flex屬性（display: flex;），來控制子盒子的位置和排列方式

1.3 flex佈局父項常見屬性

如下六個屬性是對父元素設置的

• flex -direction:設置主軸方向

• justify-content：設置主軸上的子元素排列方式

• flex-wrap：設置子元素是否換行

• align-content：設置側軸上的子元素的排列方式（多行）

• align-items：設置側軸上的子元素排列方式（單行）

• flex-flow：複合屬性，至關於同時設置了flex-direction和flex-wrap

1.3.1 flex-direction設置主軸的方向

主軸與側軸

在flex佈局中，是分爲主軸和側軸兩個方向，一樣的叫法有:行和列、x軸和y軸

• 默認主軸方向就是x軸方向，水平向右

• 默認側軸方向就是y軸方向，水平向下

屬性值

flex-direction屬性決定主軸的方向（即項目排列的方向）

注意：主軸和側軸是會變化的，看flex-direction設置誰爲主軸，剩下的就是側軸。而子元素是跟着主軸來排列的

屬性值	說明
row	默認值從左到右
row-reverse	從右到左
column	從上到下
column-reverse	從下到上

 

1.3.2 justify-content設置主軸上子元素排列方式

justify-content屬性定義了項目在主軸上的對齊方式

注意：使用這個屬性以前必定要肯定好主軸是哪一個

屬性值	說明
flex-start	默認值 從頭開始 若是主軸是x軸，則從左到右
flex-end	從尾部開始排列
center	主軸居中對齊（若是主軸是x軸則水平居中）
space-around	平分剩餘空間
space-between	先兩邊貼邊 再平分剩餘空間（重要）

1.3.3flex-wrap設置子元素是否換行

默認狀況下，項目都排列在一條線上（又稱軸線）上，flex-wrap屬性定義，flex佈局中默認是不換行的

1.3.4 align-items設置側軸上子元素排列方式（單行）

該屬性控制子項在側軸（默認是y軸）上的排列方式 ，在子項爲單項（單行）時使用

屬性值	說明
flex-start	從上到下
flex-end	從下到上
center	擠在一塊兒（垂直居中）
stretch	拉伸（默認值）有高度不能拉伸

1.3.5align-content設置側軸上的子元素的排列方式（多行）

設置子項在側軸上的排列方式，而且只能用於子項出現換行的狀況（多行），在單行下是沒有效果的。

屬性值	說明
flex-start	默認值在側軸的頭部開始排列
flex-end	在側軸的尾部開始排列
center	在側軸中間顯示
space-around	子項在側軸平分剩餘空間
space-between	子項在側軸西安分部在兩頭，在平分剩餘空間
stretch	設置子項元素高度平分父元素高度

align-content和align-items區別

• align-items適用於單行狀況下，只有上對齊、下對齊、居中和拉伸

• align-content適用於換行（多行）狀況下（單行狀況下無效），可設置上對齊、下對齊、居中、拉伸以及平均分配剩餘空間等屬性值

1.3.6 flex-flow

flex-flow屬性是flex-direction和flex-wrap屬性的複合屬性

flex-flow：row wrap;設置主軸爲x軸，換行

屬性值	說明
no-wrap	默認值，不換行
wrap	換行

1.4 flex佈局子項常見屬性

1.4.1 flex屬性

flex屬性定義子項目分配剩餘空間，用flex來表示佔多少份數

可爲數字，也可爲百分比，百分比相對於父級來講

1.4.2align-self控制子項本身在側軸上的排列方式

align-self屬性 容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。

默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

1.4.3 order屬性定義項目的排列順序

數值越小，排列越靠前，默認爲0

注意：和z-index不同。