移動端flex布局經驗總結

flex布局（彈性布局）

2.布局原理

2.1 flex是flexble Box的縮寫，意為“彈性布局”，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex布局。

當我們為父盒子設為flex布局以後，子元素的float、clear和vertical-align屬性将失效。

伸縮布局=彈性布局=伸縮盒布局=flex布局。

總結flex布局原理：

就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式。

3.flex布局父項常見屬性

3.1常見父項屬性

以下6個是給父元素設定的屬性：

· flex-direction：設定主軸方向

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

· flex-wrap：設定子元素是否換行

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

· align-items：設定側軸上的子元素排列方式（單行）垂直居中（主軸是x軸 ）

· flex-flow：複合屬性，相當于同時設定了flex-direction和flex-wrap

3.2· flex-direction：設定主軸方向

1.主軸與側軸

在flex布局中，分為主軸和側軸兩個方向，同樣的叫法有：行和列、x軸和y軸。

· 預設主軸方向就是x軸方向，水準向右

· 預設側軸方向就是y軸方向，水準向下

2.屬性值

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

注意：主軸和側軸是會變化的，就看flex-direction設定誰為主軸，剩下的就是側軸。 就是設x為主軸，y就是側軸。設y為主軸，x就是側軸

我們的子元素也是跟着主軸排列的

屬性值 說明

row 預設從左到右

row-reverse 從右到左

column 從上到下

column-reverse 從下到上

3.3· justify-content：設定主軸上的子元素排列方式

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

注意：使用這個屬性之前一定要确定好主軸是哪個。

屬性值 說明

flex-start 預設值從頭開始，如果主軸是x軸，則從左到右 ，主軸是y，從上到下*

flex-end 從尾部開始排列（順序是不變的）設定元素居右排列

center 在主軸居中對齊（如果主軸是x軸則水準居中）

space-around 平分剩餘空間

space-between 先兩邊貼邊 在平分剩餘空間（重要）

3.4· flex-wrap：設定子元素是否換行*

預設情況下，項目都排在一條線上（又稱“軸線”）上。flex-warp屬性定義，flex布局中預設是不換行的。

如果裝不開，會縮小子元素的大小。

屬性值 說明

wrap 換行

nowrap 不換行，預設

3.5· align-items：設定側軸上的子元素排列方式（單行使用）

該屬性是控制子軸在側軸（預設是y軸）上的排列方式，在子項為單項的時候使用

屬性值 說明

flex-start 預設值，從上到小

flex-end 從下到上

center 垂直居中**

stretch 拉伸（拉伸子盒子不能給高度，會和父盒子高度一樣高）

3.6· align-content：設定側軸上的子元素的排列方式（多行使用，單行是沒有效果的）

設定子項在側軸上的排列方式 并且隻能用于子項出現換行的情況（多行），在單行沒有效果（單行align-items）

屬性值 說明

flex-start 預設值從側軸的頭部開始排列*

flex-end 在側軸的尾部開始排列

center 在側軸中間顯示**

space-around 子項在側軸平分剩餘空間**

space-between 子項在側軸先兩邊貼邊 在平分剩餘空間（重要**）

stretch 設定子項元素高度平分父元素高度（拉伸子盒子不能給高度，會和父盒子高度一樣高）

align-content 和 align-items 差別

· align-items 适用于單行情況下，隻有上對齊、下對齊、居中和拉伸。

· align-content适應于換行（多行）情況下（單行情況下無效），可以設定上對齊、下對齊、居中、拉伸以及平均配置設定剩餘空間等屬性值。

· 一句話就是單行用align-items 多行用align-content

3.7flex-flow

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

flex-flow：row wrap；（設定主軸為x軸、換行）

4.flex布局子項常見屬性（添加在子元素身上的屬性）

·flex子項目占的份數

·align-self控制子項自己在側軸的排列方式

·order屬性定義子項的排列順序（前後順序）

4.1 flex屬性

flex 屬性定義子項目配置設定剩餘空間，用flex來表示占多少份數。

flex：1/2/3 （平均配置設定為：1份/2份/3份）

4.2align-self 控制子項自己在側軸上的排列方式

algn-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆寫align-items屬性。

預設值為auto，表示內建父元素的align-items屬性，如果沒有父元素，則等同于stretch。

align-self：flex-end；

4…3 order屬性定義項目的排列順序

數值越小，排列越靠前，預設為0，可以為負數（注意：和z-index不一樣）

order：-1； -1就在0的前面

案例制作

技術選型：flex為主

項目模式建立單獨的檔案夾：

css js img html

引入公共css、再引入自己的css

引入常用初始化樣式body

盒子高度是固定死不變的，寬度是自适應。

1.搜尋子產品 search

固定定位，固定的盒子要設定寬度，固定的盒子寬度是以螢幕為準，是以要給他設定最大最小寬度。

固定盒子居中，margin： 0 auto；因為定位無效，隻能修改left：50%值，和用transform：translateX（-50%）來修改。

解決css3 相容問題 ，-webkit-transform： translateX（-50%）；要寫在上面

左邊框是自适應的，右邊登入盒子給固定的大小，左邊不給寬度自适應flex：1；（不要忘給父盒子添加display：flex屬性）

右邊的登入盒子圖檔用僞元素設定，::before；（是行内元素）

精靈圖問題：

打開精靈圖，把精靈圖縮放為一半的大小（圖檔引入時候一樣是要進行縮放的大小），（因為是2倍圖是以縮放），然後測量大小

左邊搜尋盒子

css3 盒子模型 box-sizing：border-box；（邊框算到寬高裡面），文字設定行高等于高的話文字就會偏下，需要減去邊框的像素

給僞元素絕對定位，用來替換block，這樣文字可以和他一行顯示

盒子陰影 box-shadow：0 0 0 rgba（0,0,0，.5） 第一個是水準，第二個是垂直，第三個是模糊，顔色0-1取值

2.焦點圖 focus

3.局部導航欄 local-nav

給父級添加flex，子元素設定為5份。flex：1；

上下結構，将主軸設定為y軸flex-direction：column，就可以上下顯示，居中對齊，是設定側軸x居中（單行）align-items：center；

a标簽的title屬性可以設定滑鼠移入顯示的文本

快速更換背景圖檔：

利用屬性選擇器更改 ，整體聲明，在一個一個更換圖檔

4.主導航欄 nav

三行需要給他主軸設定為y，然後分等份，三列再将主軸設定為x，分等份

小豎線用白邊框，不然後會有背景色

已經設定flex：1；的可以設定flex屬性

文字陰影 text-shadow：1 1 rgba（0,0,0，.5） 第一個是水準，第二個是垂直

漸變背景色 （必須添加浏覽器字首）

• background：linear-gradient（起始方向，顔色1，顔色2，…）；
• background：-webkit-linear-gradient（起始方向，顔色1，顔色2，…）；
• 預設起始方向是top，起始方向可以是 left top 這樣 左上到右下

5.側導航欄 subnav-entry

flex-warp：warp； 這裡li的盒子 設定為flex：1是沒有效果的，此時li的寬的就需要用百分比了，設定為父親的25%

6.銷售區域sales-box 分上sales-hd 下sales-bd兩塊

sales-hd 頭部

左右兩塊定位

左邊熱門活動結構優化，要将字給隐藏，圖檔使用僞元素添加，僞元素必須有 content：‘’ 屬性

右邊 更多福利

不需要設定大小 用内容撐開；

小三角用僞元素寫：三角做法，給一個上邊框 一個右邊框 将角度轉變 transform：rotate（機關deg）