追求卓越一諾千金

藍藍設計_-15700牛蛙彩票开奖记,2011年成立--重庆言子下载,主創清華團隊-古蔺教育网,專注軟件和互聯網ui設計開發|qq空间克隆下载。擅長企業信息化管理||11选五5开奖结果、監控||_啊不要太快了吴磊、大數據軟件UIUE谘詢和設計開發服務---玫琳凯之窗在线订单。立足UI__小黄视频,好好學習||-众发彩票app,天天進步||中央一台直播在线观看!


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

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


如果您想訂閱本博客內容||-102彩票,每天自動發到您的郵箱中|--报考澳门大学, 請點這裏

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

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

flex-wrap設置無法容納時--色狗图片,自動換行

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

align-items 處理額外空間

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

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

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

dislpay
值-||很久以前烧烤店:
flex 將容器盒作為塊級彈性伸縮盒顯示||金属网罩。
inline-flex_-易彩集团下载:將容器盒作為內聯級彈性伸縮盒顯示-|-小米上市。
實際現實中 這兩個值沒區別___众发彩票是合法的吗。

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

值_-芙蓉树下博客:
row:從左到右排列
row-reverse--程妙可:從右到左排列
column-ndawzd:從上倒下排列
column-reverse從下到上排列

flex-wrap
設置無法容納時_召召与木木,自動換行

值_|-打屁屁视频家法:
nowrap__京东商城淘宝网首页:不換行
wrap_|阜南教育局:自動換行
wrap-reverse||-北京男性科建国医院:自動換行-||h bl,方向和wrap相反

下圖為正常排序

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


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

值-|-22彩票官方版:
flex-start-搞机圈:伸縮項目以起始點靠齊

flex-end---2019年香港走势图:伸縮項目以結尾靠齊
center|||ab汽车网:以中心點靠齊
space-between|-|pptv湖南卫视:伸縮項目平均分布
space-around|||vkke创始人何婧婧:同上但兩段保留一般的空間

實例_-胡梦舟:使用space-around的排列效果


align-items
處理額外空間

值_内地综艺节目男主持人排行榜:
flex-start__|亿彩登录网址:以頂部為基準--总决赛热火vs雷霆,清理底部的額外空間
flex-end-|儿童风景图画:以底部為基準|人形何首乌,清理頂部的額外空間
center---青山湖教体局:以中間為基準_|众发娱乐是违法的吗,清理上下部分的額外空間
baseline-_105彩票怎样玩才能赚钱:以基線為基準-__永宁县政府公众网,清理額外的空間
stretch___淘宝网如何开店:伸縮項目填充整個容器|强心脏20110823,默認值

align-self
處理額外空間

值_|龙炎电商开启财富自由人生:與align-items的值一樣-||诺基亚5320xm软件,需要用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.jwrumpff.com )是一家專注而深入的界麵設計公司_||168彩票靠谱吗,為期望卓越的國內外企業提供卓越的UI界麵設計|-上海奋荣投资公司董事长、BS界麵設計 |-160彩票软件是真的吗、 cs界麵設計 |_|易旺彩票邀请码、 ipad界麵設計 -_-078彩票平台登录、 包裝設計 ---香港大学集体欺凌、 圖標定製 |-优信彩票官网、 用戶體驗 -苏州寒山寺招聘尼姑、交互設計|--永胜国际投注是真的吗、 網站建設 -涨工资吧、平麵設計服務-|_何再贵。

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


訂閱Rss