2019-7-3 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
使用新版本的彈性伸縮布局
display使用彈性伸縮盒
direction容器盒內(nèi)元素的排列順序
flex-wrap設(shè)置無(wú)法容納時(shí)，自動(dòng)換行
justify-content 伸縮項(xiàng)目的排列方式
align-items 處理額外空間
align-self 單獨(dú)處理一個(gè)伸縮項(xiàng)目的額外空間
flex 控制伸縮容器的比例分配
order 設(shè)置伸縮項(xiàng)目出現(xiàn)的位置
dislpay
值：
flex 將容器盒作為塊級(jí)彈性伸縮盒顯示。
inline-flex：將容器盒作為內(nèi)聯(lián)級(jí)彈性伸縮盒顯示。
實(shí)際現(xiàn)實(shí)中 這兩個(gè)值沒(méi)區(qū)別。
direction
容器盒內(nèi)元素的排列順序
值：
row:從左到右排列
row-reverse：從右到左排列
column：從上倒下排列
column-reverse從下到上排列
flex-wrap
設(shè)置無(wú)法容納時(shí)，自動(dòng)換行
值：
nowrap：不換行
wrap：自動(dòng)換行
wrap-reverse：自動(dòng)換行，方向和wrap相反
下圖為正常排序
使用wrap-reverse后縮小瀏覽器時(shí):
justify-content
伸縮項(xiàng)目的排列方式
值：
flex-start：伸縮項(xiàng)目以起始點(diǎn)靠齊
flex-end：伸縮項(xiàng)目以結(jié)尾靠齊
center：以中心點(diǎn)靠齊
space-between：伸縮項(xiàng)目平均分布
space-around：同上但兩段保留一般的空間
實(shí)例：使用space-around的排列效果
align-items
處理額外空間
值：
flex-start：以頂部為基準(zhǔn)，清理底部的額外空間
flex-end：以底部為基準(zhǔn)，清理頂部的額外空間
center：以中間為基準(zhǔn)，清理上下部分的額外空間
baseline：以基線(xiàn)為基準(zhǔn)，清理額外的空間
stretch：伸縮項(xiàng)目填充整個(gè)容器，默認(rèn)值
align-self
處理額外空間
值：與align-items的值一樣，需要用nth-child（）設(shè)置某一個(gè)需要處理的伸縮項(xiàng)目
flex
設(shè)置伸縮項(xiàng)目分配比例
p:nth-child(1)
{
flex: 1;
}
p:nth-child(2)
{
flex: 2;
}
p:nth-child(3)
{
flex: 2;
}
p:nth-child(4)
{
flex: 1;
}
order
設(shè)置伸縮項(xiàng)目出現(xiàn)的位置
p:nth-child(1)
{
order:2;
}
p:nth-child(2)
{
order:3;
}
p:nth-child(3)
{
order:4;
}
p:nth-child(4)
{
order:1;
}
---------------------
藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sdgs6788.com