flex布局是用來為盒裝模型提供最大的靈活性，任何乙個容器都可以指定為flex布局
設為flex布局的子元素的float clear 和vertical-align等屬性將失效
只要將display 設為flex即可
採用flex布局的元素，稱為flex容器flex container 他的所有子元素自動稱為容器成員，稱為flexitem
容器中預設存在兩根軸:水平的主軸main axis和垂直的交叉軸cross axis
主軸的開始位置叫做main start 結束位置叫做main end
交叉軸的開始位置叫做cross start 結束位置叫做cross end
專案預設沿主軸排列
單個專案佔據的主軸空間叫做main size 佔據的交叉軸空間叫做cross size
容器的屬性
flex-direction 屬性決定主軸的方向(即專案的排列方向)
flex-wrap 專案都排在一條線上 flex-wrap屬性定義 如果一條軸排不下 如何換行
justify-content屬性定義了專案在主軸上的對齊方式
flex-start flex-end center space-between等
align-items 屬性定義專案在交叉軸上如何對齊
設定在專案上的屬性有:
order:定義專案的排列順序 數值越小 排列越靠前 預設為0
flex-grow屬性定義專案的放大比例 預設為0
flex-shrink屬性定義了專案的縮小比例 預設為1
align-self屬性允許單個專案與其他專案不一樣的對齊方式
相容移動裝置的顯示效果
width=device-width 寬度等於當前裝置的寬度
intial-scale 初始的縮放比例 預設為1.0
minimum-scale 允許使用者縮放到的最小比例
maximum-scale 允許使用者縮放到的最大比例
user-scalable 使用者是否可以手動縮放
設定ie渲染方式預設為最高 瀏覽器的文件模式卻是ie8
宣告必須是html文件的第一行 位於html 標籤之前
指示web瀏覽器關於頁面使用哪個html版本進行編寫的指令
css布局之flex布局
網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...
css彈性布局（flex）
1 概念解讀 傳統的布局解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。但對於一些特殊的布局方式 如垂直居中 傳統盒模型顯得有點力不從心，而對彈性布局 flex 來說卻很容易實現。2009年，w3c 提出了一種新的方案 flex 布局 flex是flexib...
CSS關於flex布局
注意 flexbox布局最適合應用程式的元件和小規模布局，而grid布局則適用於更大規模的布局 談flex布局前先了解下flex的基本屬性 flex的基本屬性有flex basis flex direction flex wrap flex flow flex grow flex shrink六個 ...