1. 相容性好
2. 布局繁瑣
3. 侷限性，不能在移動端很好地布局
1. 操作方便，布局極 為簡單，移動端應用很廣泛
2. pc端瀏覽器支援情況較差
3. ie11或更低版本，不支援或僅支援部分
1. 如果是pc端介面布局，還是使用傳統布局
2. 如果是移動端或者不考慮相容性問題的pc端介面布局，我們還是使用flex布局
任何乙個容器都可以指定為flex布局，同時當我們為父盒子設定為flex布局之後。子元素的float、clear和vertical-align屬性將失效
採用flex布局的元素稱為flex容器，簡稱「容器」，他的所有子元素自動成為容器成員，稱為flex專案簡稱「專案」
總結原理：就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式
在flex布局中，是分為主軸和側軸兩個方向
justify-content 屬性定義了專案在主軸上的對齊方式
使用這個屬性之前一定要確定好主軸是哪個
屬性值----------------------說明
flex-start-------------------預設值 從頭部開始 如果主軸是x軸，則從左到右
flex-end---------------------從尾部開始排列
center------------------------在主軸居中對齊(如果主軸是x軸則水平居中)
space-around-------------平分剩餘空間
space-between-----------先兩邊貼邊 再平分剩餘空間(重要)
預設情況下，專案都排在一條線(又稱"軸線")上。flex-wrap屬性定義，flex布局中預設是不換行的
如果裝不開，會縮小子元素的寬度，放到父元素裡面
屬性值----------------------說明
nowrap---------------------預設值 不換行
wrap-------------------------換行
該屬性是控制子項在側軸(預設是y軸)上的排列方式，在子項為單項的時候使用
屬性值----------------------說明
flex-start-------------------預設值 從上到下
flex-end---------------------從下到上
center------------------------擠在一起居中(垂直居中)
stretch-----------------------拉伸
設定子項在側軸上的排列方式並且只能用於子項出現換行的情況(多行),在單行下是沒有效果的。
屬性值----------------------說明
flex-start-------------------預設值 在側軸的頭部開始排列
flex-end---------------------從側軸的尾部開始排列
center------------------------在側軸中間顯示
space-around-------------子項在側軸平分剩餘空間
space-between-----------子項在側軸先分布在兩頭 再平分剩餘空間(重要)
stretch-------------設定子項元素高度平分父元素高度
flex-flow屬性是flex-direction和flex-wrap屬性的復合屬性
flex-flow: row wrap
flex屬性定義子專案分配剩餘空間，用flex來表示佔多少份數
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch
數值越小·，排列越靠前，預設為0
注意：和z-index不一樣
移動web開發 flex布局
container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 總結 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex flow row wrap flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。item...
移動web開發 flex布局
container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 總結 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex flow row wrap flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。item...
移動web開發 flex布局
目錄2.0 flex布局原理 3.0 父項常見屬性 4.0 flex布局子項常見屬性 總結 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 注意 主軸和側軸是會變化的，就看 flex direction 設定誰為主軸，剩下的就是側軸。而我們的子元素是跟著主軸來排列的 示例 123 f...