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