先建立專案檔案，在index.html 檔案裡面新增視口標籤
分析觀察專案結構
移動端專案一定要在不同尺寸的裝置上面多跑跑，看看頁面布局會不會發生變化。
百分比布局，不是每乙個元素的尺寸必須必須寫成百分百。但是百分比布局，寬寫百分比，高正常寫。
背景精靈圖寫法：
消除a標籤在移動端 自帶高光效果
-webkit-tap-highlight-color: transparent;
dpg 是京東研發的一種格式，dpg是其他格式大小的一半。
採用flex布局的元素，稱為flex容器（flex container），簡稱」容器」。
它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱」專案」。
容器預設存在兩根軸：水平的主軸和垂直的交叉軸。
專案預設沿主軸排列。
flex-direction：屬性決定主軸的方向（即專案的排列方向）
—row（預設值）：主軸為水平方向，起點在左端。
—row-reverse：主軸為水平方向，起點在右端。
—column：主軸為垂直方向，起點在上沿。
—column-reverse：主軸為垂直方向，起點在下沿
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
divspan
style
>
head
>
>
>
>
1span
>
>
2span
>
>
3span
>
>
4span
>
div>
body
>
html
>
flex-wrap：預設情況下，專案都排在一條線上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
—nowrap（預設）：不換行
—wrap：換行，第一行在上方。
—wrap-reverse：換行，第一行在下方。
flex-flow：屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
justify-content：屬性定義了專案在主軸上的對齊方式。
—flex-start（預設值）：左對齊
—flex-end：右對齊
—center： 居中
—space-between：兩端對齊，專案之間的間隔都相等。
—space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
*div
span
style
>
head
>
>
class
="a"
>
>
1span
>
>
2span
>
>
3span
>
>
4span
>
>
5span
>
>
6span
>
>
7span
>
>
8span
>
div>
body
>
html
>
align-items：屬性定義專案在交叉軸上如何對齊(設定單行元素，多行元素沒有作用)。
—flex-start：交叉軸的起點對齊。
—flex-end：交叉軸的終點對齊。
—center：交叉軸的中點對齊。
—baseline: 專案的第一行文字的基線對齊。
—stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
align-content：屬性定義了多根軸線的對齊方式(設定多行元素，單行元素沒有作用)。
—flex-start：與交叉軸的起點對齊。
—flex-end：與交叉軸的終點對齊。
—center：與交叉軸的中點對齊。
—space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
—space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
—stretch（預設值）：軸線佔滿整個交叉軸。
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，控制子元素的大小。
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。
flex-end
baseline
center
stretch
flex-start
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
divspan
span:nth-child(1)
span:nth-child(2)
span:nth-child(3)
span:nth-child(4)
style
>
head
>
>
>
>
1span
>
>
2span
>
>
3span
>
>
4span
>
div>
body
>
html
>
彈性盒子布局
彈性子元素屬性 鳴謝彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空...
彈性盒子布局 flex布局
彈性盒子布局方式 box 設為flex布局後，子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 容器...
flex彈性盒子,,彈性盒子布局
flex 彈性 布局 2009年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局 ie10 以往的網頁布局 layout 方式 基於盒模型,依賴display屬性 margin屬性 position屬性 float屬性特殊布局比較麻煩 比如元素的垂直居中 一.flex是什麼?flex...