摘要:高度要撐開橫排換行產(chǎn)生多軸嘗試添加代碼可以說,布局在父元素上對子元素垂直方向的控制還是非常到位和明確的子元素屬性探究大概可以理解為子元素的排隊(duì)號碼,默認(rèn)都是,越大排隊(duì)越后可以看到,號因?yàn)樵O(shè)置為排到了后面而號因?yàn)楦哟蟮亩诺阶詈蟆?/p>
案例基礎(chǔ)布局
html
css
.box{ display: -webkit-flex; display: flex; } .item{ width: 200px; height: 300px; background: red; border: 1px solid #ccc; font-size: 50px; text-align: center; line-height: 300px; color:#fff; }
因?yàn)閒lex主要方便與移動端布局,所以測試以谷歌模擬移動端看效果:
因?yàn)槭褂?flex 布局,子元素默認(rèn)是橫向排列,所以不需要float,也不起作用;父盒子屬性探究 flex-direction
flex-direction 表示子元素的排列方向和順序;默認(rèn) row (橫排,左到右); row-reverse 表示 橫排右到左
.box{ display: -webkit-flex; display: flex; flex-direction:row-reverse; }
如果每個(gè)把每個(gè) li 設(shè)置為 width:3000px;(當(dāng)前屏幕寬度980px),效果:
子元素寬度超出,不但沒有換行,會自動適應(yīng)大小,平分為 25%;
上面的平分 只是在 row 的時(shí)候 會平分,如果是換成豎向排列:
flex-direction: column;
元素不會被擠壓了,擁有3000px寬;但是要注意,它不是因?yàn)椴粔蚩臻g而換行了,只是column 值規(guī)定了它 豎向排列
下面的值可以調(diào)整為 倒序豎向排列
flex-direction: column-reverse; //表示元素豎直 反向排flex-wrap
flex-wrap 默認(rèn) nowrap:不換行。上面的3000px 子元素正是因?yàn)?這個(gè)豎向默認(rèn)是不會換行的,所以 上面設(shè)置3000px寬,不會換行;
同樣的代碼,如果加多一句
.box{ display: -webkit-flex; display: flex; flex-direction: row-reverse; flex-wrap: wrap; //換行,第一行在上方。 }
可以發(fā)現(xiàn),設(shè)置為可以換行以后,子元素寬度變?yōu)?00%屏幕寬了;這就像一個(gè)彈性盒子塞到了比自己小的盒子中,彈性盒子自動收縮了自己的寬度。
如果這樣寫:
.box{ display: -webkit-flex; display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; //換行,第一行在下方。 }flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認(rèn)值為row nowrap。
flex-flow:row wrap === flex-direction:row; flex-wrap: wrap
代碼又改一下:
.box{ display: -webkit-flex; display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; } 可以寫成 .box{ display: -webkit-flex; display: flex; flex-flow:row-veverse wrap-reverse }justify-content
它有五個(gè)值,其中如果把 item 比做word文檔的文字的話, flex-star 可以看做是左對齊, flex-end: 右對齊; flex-center: 居中;
重點(diǎn)介紹值 space-around:平分內(nèi)容空余空間,每個(gè)項(xiàng)目兩側(cè)的間隔相等;
設(shè)空余空間為 area,有子元素 k個(gè),每個(gè)子元素等于增加了多少margin?==> area/2k
本例子:
.item{ width:200px; } .box{ display: -webkit-flex; display: flex; justify-content: space-around; }
值得注意的是,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
space-between:兩端對齊,項(xiàng)目之間的間隔都相等。不給
align-itemsalign 字樣基本就知道它是針對 垂直方向的了;
.box{ display: -webkit-flex; display: flex; justify-content: space-between; height: 1760px; align-items: center; }
記得給父加一個(gè)高度;這樣子可以看出元素垂直居中了
其他的相似的屬性就不再一一寫了
flex-start:交叉軸的起點(diǎn)對齊。
flex-end:交叉軸的終點(diǎn)對齊。
stretch(默認(rèn)值):如果項(xiàng)目未設(shè)置高度或設(shè)為auto,將占滿整個(gè)容器的高度。
看 baseline屬性: 項(xiàng)目的第一行文字的基線對齊。
這個(gè)屬性 比較新穎,可以試試:
.box{ align-items: baseline; }
上面我給每個(gè)item 都設(shè)置了 不同的高度 和 line-height;
可以看到 容器為了讓文字對齊 而調(diào)整自己的位置;
align-content定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線,該屬性不起作用。
.box{ height: 1760px; //高度要撐開 display: -webkit-flex; display: flex; justify-content: space-between; flex-flow: row wrap; //橫排 換行;產(chǎn)生多軸 }
嘗試添加 代碼
align-content: flex-end;
align-content:space-around;
align-content:space-between;
align-content : center;
可以說,flex布局在父元素上對子元素垂直方向的控制還是非常到位和明確的;
子元素屬性探究 order大概可以理解為子元素的排隊(duì)號碼,默認(rèn)都是0,越大排隊(duì)越后;
可以看到,1 號因?yàn)?order 設(shè)置為10排到了后面; 而2號因?yàn)楦哟蟮膐rder 而排到最后。
flex-grow 多余空間分配比例它的值是一個(gè)number,默認(rèn)為0;只要有一個(gè)同軸元素被設(shè)定了flex-grow ,所有多余空間都會按照這個(gè)比例分配,并讓元素占滿整行。這個(gè)被分配的空間,是算在自身里面的;
盒子寬度變大了,(就是grow啦)
如果子元素有margin,那么會先計(jì)算橫排多少個(gè),再決定 flex-grow 分配的空間是多少
例如如下代碼,
//沒有設(shè)定 flex-grow 時(shí)
//設(shè)定了 flex-grow 時(shí)
所以,margin 并不算 多余空間 ,不會被重新分配;
flex-shrink此屬性與 flex-grow 有點(diǎn)相反的意思,用于處理 不換行時(shí),內(nèi)容超出屏幕了,應(yīng)該決定誰來縮小;
值越大 縮小比例越大;默認(rèn)是 1
改一下代碼;
.box{ flex-flow:row nowrap; }
此時(shí) 父盒子規(guī)定不能換行;但是5個(gè)item 寬度已經(jīng)超過屏幕寬了;此時(shí)大家是等比縮小
下面設(shè)置1號 flex-shrink:600
可以看到,盡管我把1號設(shè)置到縮放非常大了,但是實(shí)際寬度并沒有很?。徽f明瀏覽器會自己決定內(nèi)容是否已經(jīng)足夠放下,夠了就停止縮放;
當(dāng)內(nèi)容非常多時(shí),1號就明顯被縮放得非常厲害,同時(shí)我發(fā)現(xiàn),4號盡管設(shè)置200,但是它的大小跟被設(shè)為600的 1號是一樣的。
這是因?yàn)樗麄円呀?jīng)縮放到最后只能容納文字的空間了;所以就不會再縮放下去;這跟文字占位一個(gè)道理
flex-basis屬性定義了在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間(main size)。瀏覽器根據(jù)這個(gè)屬性,計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto,即項(xiàng)目的本來大小。
簡單來說,就是這個(gè)值會影響瀏覽器計(jì)算的輸入值,有四種情況
1,本來就會超出,然后你設(shè)定的值比原值低(原值200px每個(gè)item),你的元素會被壓縮。
1,本來就會超出,然后你設(shè)定的值比原值大,你的元素會被相對放大些。
3 本來不會超出,你設(shè)定的值比原來小,你還是會小一點(diǎn)
4 本來不會超出,你設(shè)定的值比原來大,你就會更大
這個(gè)值你可以當(dāng)做寬度來看,當(dāng)設(shè)定為 跟原來一樣的值得時(shí)候,基本沒有變化
此子元素多帶帶設(shè)置垂直方向?qū)R方式;默認(rèn)auto 表示父親怎么定義就怎么來;其他值跟align-items是一樣的
此屬性主要是方便特殊定位 某個(gè)字元素
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
.item { flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }
該屬性有兩個(gè)快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建議優(yōu)先使用這個(gè)屬性,而不是多帶帶寫三個(gè)分離的屬性,因?yàn)闉g覽器會推算相關(guān)值。
上圖,去結(jié)算 要固定寬度并靠右顯示;左邊兩個(gè) 價(jià)格自由分配 剩余空間;
布局(本案例是小程序)css:已經(jīng)優(yōu)惠 ¥{{discounts}} 合計(jì) ¥{{account-discounts}} 去結(jié)算
.order-bottom{ display: flex; justify-content: space-between; } .bot-left{ display: flex; justify-content: space-around; align-items: center; flex: 1; } .to-pay{ width: 220rpx; height: 100%; }情景二:右邊固定高度,左邊文字垂直居中 布局
css:備注:
.option-item{ display: flex; justify-content: space-between; align-content: center; font-size: 16px; } .opiton-title{ align-items: center; display: flex; } .option-val textarea{ width:400rpx; min-height: 50rpx; }最后
移動端使用flex 布局感覺還是非常給力的,并且通常滿足各個(gè)屏幕自適應(yīng)的要求;有機(jī)會還是要多實(shí)踐起來。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/115916.html
摘要:系統(tǒng)性的介紹關(guān)于布局,也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個(gè)布局的頁面所具有的元素可分為類。每行第一個(gè)元素與行首對齊,每行最后一個(gè)元素與行尾對齊。 flex-tutorials 系統(tǒng)性的介紹關(guān)于flex布局,也作為自學(xué)的一篇文章 flex基礎(chǔ)理念 使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...
摘要:系統(tǒng)性的介紹關(guān)于布局,也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個(gè)布局的頁面所具有的元素可分為類。每行第一個(gè)元素與行首對齊,每行最后一個(gè)元素與行尾對齊。 flex-tutorials 系統(tǒng)性的介紹關(guān)于flex布局,也作為自學(xué)的一篇文章 flex基礎(chǔ)理念 使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...
摘要:布局也經(jīng)歷了一段演變歷史。不同于將要出現(xiàn)的網(wǎng)格布局針對目標(biāo)為大比例布局,彈性盒布局更適用于應(yīng)用組件和小比例布局。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向,而布局是基于流。 前言 你還在用display+position+float來進(jìn)行css布局嗎?有沒有覺得用傳統(tǒng)的這種布局方法來實(shí)現(xiàn)特殊布局特別麻煩困難,例如:垂直居中。今天來記錄一下自己對flex布局的了解(雖然不算神馬新東西了都可以說是舊東西...
閱讀 3156·2021-11-22 09:34
閱讀 2795·2021-09-22 15:28
閱讀 816·2021-09-10 10:51
閱讀 1852·2019-08-30 14:22
閱讀 2273·2019-08-30 14:17
閱讀 2733·2019-08-30 11:01
閱讀 2295·2019-08-29 17:19
閱讀 3653·2019-08-29 13:17