目錄
一，體驗
二，flex-direction
三，justify-content
四，flex-wrap和align-items
1，flex-wrap
2，align-items
五，align-content
六，flex
七，align-self
八，導航欄
了解flex布局、它與傳統布局的區別及應用場景
對比:傳統布局：
flex布局：
使用：特點：
名稱：語法：flex布局入口，加在容器上
display:flex;作用：確認主軸的選擇
特點：把主軸確認，元素預設按照確認的主軸方向進行排布
語法:
flex-direction:row /* 預設值 從左到右 */預設值從左到右
row-reverse
從右到左
column
從上到下
column-reverse
從下到上
特點:預設：主軸： x 軸方向，水平向右；側軸：是y 軸方向，水平向下；
舉例：展示flex的四種排列方向。
34單詞justify：整理版面
作用：控制主軸上的元素的各種各樣的對齊方式
類似：word裡的左對齊，右對齊，居中對齊，分散對齊；
語法
justify-content:flex-start預設值從頭部開始如果主軸是x軸，則從左到右
flex-end
從尾部開始排列
center
在主軸居中對齊(如果主軸是x軸則水平居中)
space-around
平分剩餘空間
space- between
先兩邊貼邊再平分剩餘空間(重要)
34作用：控制子元素是否換行；
語法：
/* 預設值 不換行；子專案加起來的寬度超過父級的寬度時，子項寬度會被縮小，寬度只是不生效，必須設定 */
flex-wrap:nowrap;
/* 換行； 子項的總寬加起來超過父級寬度，就會換行*/
flex-wrap:wrap;
34該屬性是控制子項單行在側軸（預設是y軸）上的對齊方式，在子項為單項（單行）的時候使用；
整體一行元素看成整體，設定在側軸上的對齊方式
語法:flex-start
預設值從上到下
flex-end
從下到上
center
擠在一起居中(垂直居中)
stretch
拉伸注意: stretch如果專案未設定高度或設為auto將佔滿整個容器的高度
舉例：展示item在側軸上的對齊方式
12
34
語法:flex-start
預設值在側軸的頭部開始排列
flex-end
在側軸的尾部開始排列
center
在側軸中間顯示
space- around
子項在側軸平分剩餘空間
space-between
子項在側軸先分布在兩頭，再平分剩餘空間
stretch
設定子項元素高度平分父元素高度
注意: 容器內必須有多行的專案，該屬性才能渲染出效果。
舉例：
12
34
語法
.item12
特點：預設值auto，父級設定了align-items ，auto繼承父級元素上設定側軸的對齊方式：align-items 屬性；
如果父級沒有設定align-items 屬性，auto預設值會變為strecth；
語法：flex-start
預設值從上到下
flex-end
從下到上
center
擠在一起居中(垂直居中)
stretch
拉伸舉例：
分析：整體:
單獨乙個元素
舉例：通過flex實現導航欄
大娃
二娃
三娃
章節彙總在這裡（づ￣3￣）づ╭❤～@&再見螢火蟲&【04-前端技術】
04 前端技術 移動端布局
目錄 一，移動端現狀 1，核心 2，螢幕解析度 3，谷歌瀏覽器 二，viewport 1，定義 2，語法 三，2倍圖 1，物理畫素點 2，螢幕解析度 3，解析度 4，二倍圖由來 四，移動端常見布局 1，單獨製作移動端頁面 2，響應式頁面相容移動端 3，方案 4，樣式初始化 了解 國產主流手機瀏覽器，...
前端布局之Flex布局
傳統布局方式基於盒模型，依賴display屬性 position屬性 float屬性。由於傳統布局一些操作複雜，2009年w3c提出了flex布局，可以簡便 響應式的實現各種布局，並且能夠相容所有瀏覽器。區別於傳統布局的 盒子 在flex布局中稱為 flex容器 flex container 其所有...
前端基礎 flex布局
父元素設為 flex 布局以後，子元素的float clear和vertical align屬性將失效。採用flex布局的元素，稱為 容器 所有子元素稱為 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main s...