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屬性允許單個項目與其他項目不一樣的對齊
相容行動裝置的顯示效果
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
intial-scale 初始的縮放比例 預設為1.0
minimum-scale 允許使用者縮放到的最小比例
maximum-scale 允許使用者縮放到的最大比例
user-scalable 使用者是否可以手動縮放
設定IE渲染方式預設為最高 瀏覽器的文檔模式卻是IE8
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!DOCTYPE>聲明必須是html文檔的第一行 位於html 標籤之前
指示web瀏覽器關於頁面使用哪個html版本進行編寫的指令
<!DOCTYPE html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
