今日重點：
移動web開發——flex布局
一、flex布局原理
1）flex 是 flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為 flex 布局。
2）當我們為父盒子設為 flex 布局以後，子元素的 float、clear 和 vertical-align 屬性將失效。
3）flex布局又叫伸縮布局 、彈性布局 、伸縮盒布局 、彈性盒布局
4）採用 flex 布局的元素，稱為 flex 容器（flexcontainer），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flexitem），簡稱"專案"。
總結：就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式
二、父項常見屬性
1、flex-direction設定主軸的方向
1）在 flex 布局中，是分為主軸和側軸兩個方向，同樣的叫法有 ： 行和列、x 軸和y 軸
2）預設主軸方向就是 x 軸方向，水平向右
3）預設側軸方向就是 y 軸方向，水平向下
注意： 主軸和側軸是會變化的，就看 flex-direction 設定誰為主軸，剩下的就是側軸。而我們的子元素是跟著主軸來排列的
2、justify-content 設定主軸上的子元素排列方式
3、flex-wrap設定是否換行
1）預設情況下，專案都排在一條線（又稱」軸線」）上。flex-wrap屬性定義，flex布局中預設是不換行的。
2）nowrap 不換行
3）wrap 換行
4、align-items 設定側軸上的子元素排列方式（單行 ）
1）該屬性是控制子項在側軸（預設是y軸）上的排列方式 在子項為單項（單行）的時候使用
2）flex-start 從頭部開始
3）flex-end 從尾部開始
4）center 居中顯示
5）stretch 拉伸
5、align-content 設定側軸上的子元素的排列方式（多行）
注：設定子項在側軸上的排列方式 並且只能用於子項出現 換行 的情況（多行），在單行下是沒有效果的。
6、align-content 和align-items區別
1）align-items 適用於單**況下， 只有上對齊、下對齊、居中和 拉伸
2）align-content適應於換行（多行）的情況下（單**況下無效）， 可以設定 上對齊、下對齊、居中、拉伸以及平均分配剩餘空間等屬性值。
總結：就是單行找align-items 多行找 align-content
7、flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
語法：flex-flow:row wrap;
總結：
三、flex布局子項常見屬性
1、flex 屬性
1）flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。
2）.item
2、align-self控制子項自己在側軸上的排列方式
1）align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性。
2）預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。
語法：span:nth-child(2)
3、order 屬性定義專案的排列順序
1)數值越小，排列越靠前，預設為0。
2)注意：和 z-index 不一樣。
3)語法：.item
四、背景線性漸變
語法：linear-gradient(漸變方向，漸變節點1，漸變節點2，...漸變節點n)
1）其中漸變方向可以是方位名詞或角度，預設垂直向下（180deg），0為12點方向，順時針為正方向
2）漸變色相當於一張，不是顏色 ，使用場景，常用作盒子背景(只能用作背景圖，不能用作背景色)
五、彈性盒子注意事項
1）所有容器盒子均可被設為彈性盒子
2）為某盒子設定display:flex；則該盒子會具備塊元素特性(獨佔一行，可設寬高)
3）彈性盒子內部不存在margin-top塌陷問題
4）彈性子元素類似inline-block，不會獨佔一行，可設定寬高
5）對彈性子元素設定 float vertical-align clear 無效
重點單詞：
**display: flex;： 設定盒子為彈性盒子，所有盒子都可設定，彈性盒子的子元素可直接設定寬高，彈性子元素設定float，vertical-align無效 **
flex-direction：column 設定y軸為主軸
justify-content ：space-between 先兩邊貼邊，在平分剩餘空間
flex-wrap：wrap 強制換行
align-items：center 單行設定側軸子元素居中對齊
align-content：flex-start/center/space-between/space-around/strech 多行 設定側軸子元素從頭開始排列/居中顯示/子項在側軸線分布在兩頭，在平分剩餘空間/子項在側軸平分剩餘空間/設定子項元素高度平分父元素高度
flex：1 子專案分配剩餘空間1份
align-self控制子項自己在側軸上的排列方式
有關流式布局的介紹a=href""
移動Web開發 移動端常見布局 flex布局
flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為 flex 布局。當我們為父盒子設為 flex 布局以後，子元素的 float clear 和 vertical align 屬性將失效。伸縮布局 彈性布局 伸縮盒布局 彈性盒布局...
移動端布局 flex布局
flex布局原理flex direction 預設主軸x軸水平向右 y軸垂直向下 屬性值描述row 預設從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 justify content 屬性值描述 flex start 預設從頭部開始如果主軸...
Flex移動端布局
目前使用flex布局典型的 有天貓和網易新聞。首先，利用flex的專案不需要對viewport進行縮放，直接 簡單回顧一下flex的屬性 一 設定在容器上的屬性 1 flex direction 屬性決定主軸的方向 即專案的排列方向 2 flex wrap 預設顯示在一條軸線上，如果排不下如何換行。...