彈性盒模型：display:flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮
flex-direction 彈性盒模型主軸方向設定
row（預設）---- 從左到右（側軸：從上到下）
row-reverse ---- 從右到左（側軸：從上到下）
column ---------- 從上到下（側軸：從左到右）
column-reverse 從下到上（側軸：從左到右）
flex-wrap 子元素超出父級，換行問題
nowrap (預設值) -----不換行
wrap --------------------正常換行
wrap-reverse ---------反向換行
正常換行：按照側軸方向換行。反向換行：按照側軸反方向換行
flex-flow 主軸方向設定 換行方式（即以上兩個的復合屬性）
justify-content 主軸的對齊方式
flex-start(預設值) 元素沿著主軸的開始方向進行排列，富裕空間保持在主軸方向的結束
flex-end 元素排列在主軸方向的結束位置，富裕空間保持在主軸方向的開始位置
center 元素排列在主軸中間，富裕空間平均分布在兩側
space-between 子級平均分配在主軸上，富裕空間平均分派在子級之間
space-around 富裕空間平均分配在子級的左右兩邊
富裕空間：多出的部分的空間（content+padding+border+margin 之外的）
align-items 側軸的對齊方式（一般預設不換行。所以側軸算單個）
stretch(預設值): 拉伸，撐滿側軸
flex-start：側軸上起點對齊
flex-end：側軸上終點對齊
center：側軸居中對齊
baseline：基線對齊，根據側軸文字基線進行對齊
align-content 側軸對齊方式，針對多軸（有換行的那種）
flex-start：排列在側軸開始位置
flex-end：排列在側軸結束位置
針對子級 order：n ，定義子級排列順序，數值越小，越靠前
針對子級伸縮性設定：
如果父元素放不下子元素：會對全部子元素進行同比例壓縮
flex-basis ：px 初始值，大於width則會覆蓋原width
flex-grow：n 如果父級有富裕空間，會放大子元素。數字越大放大越多
flex-shrink: n 父級空間不夠，會壓縮子元素。數字越大壓縮越狠
#box div:nth-child(1)
#box div:nth-child(2)
#box div:nth-child(3)
#box div:nth-child(4)
#box div:nth-child(5)
flex計算：計算父級剩餘空間（父級寬度-子元素的margin和）
五個子元素margin：1px 父元素width：700 則剩餘空間為790
flex：none不伸縮，不加入計算
則790/15=46 ，即每份flex寬度為46
針對子級伸縮性設定：如果父元素放不下子元素：會對全部子元素進行同比例壓縮。
flex-grow：n 如果父級有富裕空間，會放大子元素。數字越大放大越多
flex-shrink
: n 父級空間不夠，會壓縮子元素。數字越大壓縮越狠
flex-basis：px 初始值，大於width則會覆蓋原width。
margin：auto auto ------- 子級上下auto會平分上下富裕空間，左右auto會平分左右富裕空間
針對子級側軸設定：align-self：
stretch(預設值): 拉伸
flex-start：側軸上起點對齊
flex-end：側軸上終點對齊
center：側軸居中對齊
baseline：基線對齊，根據側軸文字基線進行對齊
老版本彈性盒模型
ul
li
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...
flex 平鋪布局 Flex 布局教程
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...