3.uni-app布局(flex布局之常用屬性)

  • 如何使用flex布局
// 容器 使用屬性
display: flex;
  • flex容器的屬性

1.flex-direction主軸的方向(子元素排列方式)
row(默認值):主軸為水平方向投放,起點在左端(左到右的排列方式)

row.png

column:主軸為垂直方向,起點在上沿(上到下的排列方式)

column.png

2.justify-content主軸元素的排列對齊方式
flex-start(默認值) 1)如果是flex-direction:row左對齊 2)如果是flex-direction:column上對齊

flex-end 1)如果是flex-direction:row右對齊 2)如果是flex-direction:column下對齊

flex-end -row.png

flex-direction-direction:column.png

center 1)如果是flex-direction:row水平居中 2)如果是flex-direction:column垂直居中

center-row.png

center-column.png

space-between 1)如果是flex-direction:row水平兩端對齊 2)如果是flex-direction:column垂直兩端對齊

space-between-row.png

space-between-column.png

space-around 1)如果是flex-direction:row水平方向子元素兩側(cè)的間隔相等 2)如果是flex-direction:column垂直方向子元素兩側(cè)的間隔相等

space-around-row.png
space-around-column.png

3.align-items交叉軸元素的排列對齊方式

flex-direction:row
flex-start(默認值) 垂直方向上對齊

垂直方向上對齊.png

flex-end 垂直方向下對齊
垂直方向下對齊.png

center 垂直方向居中對齊
垂直方向居中對齊.png

flex-direction:column
flex-start(默認值) 橫向左對齊

橫向左對齊.png

flex-end 橫向右對齊
橫向右對齊.png

center 橫向居中對齊
橫向居中對齊.png

  • flex容器的子元素屬性

flex子元素占據(jù)剩余空間的比例(與andorid的weight屬性類型)

①平分

1:1.png

②剩余空間的1比例(示例為占據(jù)400rpx的寬度)

占據(jù)全部剩余空間.png
  • 當(dāng)父元素設(shè)置display:flex后谅猾,子元素會自動布局并適應(yīng)寬度镰惦,但里面的文本文字超出邊界卻無法自動換行
只需要給子元素加一個css屬性:    overflow-wrap:break-word态辛;即可正常自動換行
  • 當(dāng)左邊元素固定寬高潜叛,中間元素flex=1絮爷,右側(cè)元素固定寬高,當(dāng)中間元素為超長文本欢峰,會發(fā)現(xiàn)右側(cè)元素不顯示
flex: 1;
overflow: hidden;
  • 小案例(上部分可滾動葬荷,底部固定)
小案例.png
  • 超出部分顯示省略號
display:-webkit-box;  
-webkit-box-orient:vertical;  
-webkit-line-clamp:2;  
overflow:hidden;
// 添加行高,防止超出的文字露出
line-height: 50rpx;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末纽帖,一起剝皮案震驚了整個濱河市宠漩,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌懊直,老刑警劉巖扒吁,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異吹截,居然都是意外死亡瘦陈,警方通過查閱死者的電腦和手機凝危,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進店門波俄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蛾默,你說我怎么就攤上這事懦铺。” “怎么了支鸡?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵冬念,是天一觀的道長。 經(jīng)常有香客問我牧挣,道長急前,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任瀑构,我火速辦了婚禮裆针,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己世吨,他們只是感情好澡刹,可當(dāng)我...
    茶點故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著耘婚,像睡著了一般罢浇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上沐祷,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天嚷闭,我揣著相機與錄音,去河邊找鬼赖临。 笑死凌受,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的思杯。 我是一名探鬼主播胜蛉,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼色乾!你這毒婦竟也來了誊册?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤暖璧,失蹤者是張志新(化名)和其女友劉穎案怯,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體澎办,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡嘲碱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了局蚀。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片麦锯。...
    茶點故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖琅绅,靈堂內(nèi)的尸體忽然破棺而出扶欣,到底是詐尸還是另有隱情,我是刑警寧澤千扶,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布料祠,位于F島的核電站,受9級特大地震影響澎羞,放射性物質(zhì)發(fā)生泄漏髓绽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一妆绞、第九天 我趴在偏房一處隱蔽的房頂上張望顺呕。 院中可真熱鬧接谨,春花似錦、人聲如沸塘匣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽忌卤。三九已至扫夜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間驰徊,已是汗流浹背笤闯。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留棍厂,地道東北人颗味。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像牺弹,于是被迫代替她去往敵國和親浦马。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,562評論 2 349