? CSS-弹性伸缩布局(新版本) - 蓝蓝设计_UI设计公司

追求卓越一諾千金

藍藍設計,2011年成立,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UIUE咨詢和設計開發服務。立足UI,好好學習,天天進步!


CSS-彈性伸縮布局(新版本)

2019-7-3 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容,每天自動發到您的郵箱中,

使用新版本的彈性伸縮布局
display使用彈性伸縮盒

direction容器盒內元素的排列順序

flex-wrap設置無法容納時,自動換行

justify-content 伸縮項目的排列方式

align-items 處理額外空間

align-self 單獨處理一個伸縮項目的額外空間

flex 控制伸縮容器的比例分配

order 設置伸縮項目出現的位置

dislpay
值:
flex 將容器盒作為塊級彈性伸縮盒顯示。
inline-flex:將容器盒作為內聯級彈性伸縮盒顯示。
實際現實中 這兩個值沒區別。

direction
容器盒內元素的排列順序

值:
row:從左到右排列
row-reverse:從右到左排列
column:從上倒下排列
column-reverse從下到上排列

flex-wrap
設置無法容納時,自動換行

值:
nowrap:不換行
wrap:自動換行
wrap-reverse:自動換行,方向和wrap相反

下圖為正常排序

使用wrap-reverse后縮小瀏覽器時:


justify-content
伸縮項目的排列方式

值:
flex-start:伸縮項目以起始點靠齊

flex-end:伸縮項目以結尾靠齊
center:以中心點靠齊
space-between:伸縮項目平均分布
space-around:同上但兩段保留一般的空間

實例:使用space-around的排列效果


align-items
處理額外空間

值:
flex-start:以頂部為基準,清理底部的額外空間
flex-end:以底部為基準,清理頂部的額外空間
center:以中間為基準,清理上下部分的額外空間
baseline:以基線為基準,清理額外的空間
stretch:伸縮項目填充整個容器,默認值

align-self
處理額外空間

值:與align-items的值一樣,需要用nth-child()設置某一個需要處理的伸縮項目
flex
設置伸縮項目分配比例

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
設置伸縮項目出現的位置

p:nth-child(1)
{
   order:2;
}

p:nth-child(2)
{
 order:3;
}
 p:nth-child(3)
{

 order:4;
}
p:nth-child(4)
{
 order:1;
}
--------------------- 
藍藍設計www.thriveonsite.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

標簽: CSS-彈性伸縮布局(新版本) « 如何提高用戶的安全感? | 視覺層級強力拆解»


藍藍 http://www.thriveonsite.com

訂閱Rss
优优彩票APP 国民彩票开户 千禧彩票注册 9号棋牌APP 速发彩票开户 电玩棋牌 广东快乐十分 a6网赚兼职 澳门手机网投 2019网赚最好的项目