react-native - 布局相關(guān)

flexDirection

flexDirection enum('row', 'column','row-reverse','column-reverse')
flexDirection屬性定義了父視圖中的子元素沿橫軸或側(cè)軸方片的排列方式。
    *     row: 從左向右依次排列
    *     row-reverse: 從右向左依次排列
    *     column(default): 默認(rèn)的排列方式,從上向下排列
    *     column-reverse: 從下向上排列

flexWrap

flexWrap enum('wrap', 'nowrap')
flexWrap屬性定義了子元素在父視圖內(nèi)是否允許多行排列答朋,默認(rèn)為
nowrap症概。
1.     nowrap flex的元素只排列在一行上拉庶,可能導(dǎo)致溢出贤笆。
2.     wrap flex的元素在一行排列不下時(shí)氯葬,就進(jìn)行多行排列。

justifyContent

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
justifyContent屬性定義了瀏覽器如何分配順著父容器主軸的彈性(flex)元素之間及其周圍的空間戈鲁,默認(rèn)為flex-start。
1.     flex-start(default) 從行首開始排列嘹叫。每行第一個(gè)彈性元素與行首對(duì)齊婆殿,同時(shí)所有后續(xù)的彈性元素與前一個(gè)對(duì)齊。
2.     flex-end 從行尾開始排列罩扇。每行最后一個(gè)彈性元素與行尾對(duì)齊婆芦,其他元素將與后一個(gè)對(duì)齊。
3.     center 伸縮元素向每行中點(diǎn)排列。每行第一個(gè)元素到行首的距離將與每行最后一個(gè)元素到行尾的距離相同消约。
4.     space-between 在每行上均勻分配彈性元素癌压。相鄰元素間距離相同。每行第一個(gè)元素與行首對(duì)齊荆陆,每行最后一個(gè)元素與行尾對(duì)齊滩届。
5.     space-around 在每行上均勻分配彈性元素。相鄰元素間距離相同被啼。每行第一個(gè)元素到行首的距離和每行最后一個(gè)元素到行尾的距離將會(huì)是相鄰元素之間距離的一半帜消。

alignItems

alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
alignItems屬性以與justify-content相同的方式在側(cè)軸方向上將當(dāng)前行上的彈性元素對(duì)齊,默認(rèn)為stretch浓体。    
1.     flex-start 元素向側(cè)軸起點(diǎn)對(duì)齊泡挺。
2.     flex-end 元素向側(cè)軸終點(diǎn)對(duì)齊。
3.     center 元素在側(cè)軸居中命浴。如果元素在側(cè)軸上的高度高于其容器娄猫,那么在兩個(gè)方向上溢出距離相同。
4.     stretch 彈性元素被在側(cè)軸方向被拉伸到與容器相同的高度或?qū)挾取?

alignSelf

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
alignSelf屬性以屬性定義了flex容器內(nèi)被選中項(xiàng)目的對(duì)齊方式生闲。注意:alignSelf 屬性可重寫靈活容器的 alignItems 屬性媳溺。
1.     auto(default) 元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"碍讯。
2.     stretch 元素被拉伸以適應(yīng)容器悬蔽。
3.     center 元素位于容器的中心。
4.     flex-start 元素位于容器的開頭捉兴。
5.     flex-end 元素位于容器的結(jié)尾蝎困。

flex

flex number
flex 屬性定義了一個(gè)可伸縮元素的能力,默認(rèn)為0倍啥。

position

position enum('absolute', 'relative')屬性設(shè)置元素的定位方式禾乘,為將要定位的元素定義定位規(guī)則。
1.     absolute:生成絕對(duì)定位的元素虽缕,元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定始藕。
2.     relative:生成相對(duì)定位的元素,相對(duì)于其正常位置進(jìn)行定位彼宠。因此鳄虱,"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。

padding

1. padding number 內(nèi)邊距
2. paddingBottom number 下內(nèi)邊距
3. paddingHorizontal number 左右內(nèi)邊距
4. paddingLeft number 做內(nèi)邊距
5. paddingRight number 右內(nèi)邊距
6. paddingTop number 上內(nèi)邊距
7. paddingVertical number 上下內(nèi)邊距

margin

1. margin number 外邊距
2. marginBottom number 下外邊距
3. marginHorizontal number 左右外邊距
4. marginLeft number 左外邊距
5. marginRight number 右外邊距
6. marginTop number 上外邊距
7. marginVertical number 上下外邊距

width

width number

height

height number

border

1. borderBottomWidth number 底部邊框?qū)挾?2. borderLeftWidth number 左邊框?qū)挾?3. borderRightWidth number 右邊框?qū)挾?4. borderTopWidth number 頂部邊框?qū)挾?5. borderWidth number 邊框?qū)挾?6. border<Bottom|Left|Right|Top>Color 個(gè)方向邊框的顏色
7. borderColor 邊框顏色
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末凭峡,一起剝皮案震驚了整個(gè)濱河市拙已,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌摧冀,老刑警劉巖倍踪,帶你破解...
    沈念sama閱讀 217,542評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件系宫,死亡現(xiàn)場離奇詭異,居然都是意外死亡建车,警方通過查閱死者的電腦和手機(jī)扩借,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缤至,“玉大人潮罪,你說我怎么就攤上這事×斐猓” “怎么了嫉到?”我有些...
    開封第一講書人閱讀 163,912評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長月洛。 經(jīng)常有香客問我何恶,道長,這世上最難降的妖魔是什么嚼黔? 我笑而不...
    開封第一講書人閱讀 58,449評(píng)論 1 293
  • 正文 為了忘掉前任细层,我火速辦了婚禮,結(jié)果婚禮上唬涧,老公的妹妹穿的比我還像新娘疫赎。我一直安慰自己,他們只是感情好爵卒,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評(píng)論 6 392
  • 文/花漫 我一把揭開白布虚缎。 她就那樣靜靜地躺著,像睡著了一般钓株。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上陌僵,一...
    開封第一講書人閱讀 51,370評(píng)論 1 302
  • 那天轴合,我揣著相機(jī)與錄音,去河邊找鬼碗短。 笑死受葛,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的偎谁。 我是一名探鬼主播总滩,決...
    沈念sama閱讀 40,193評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼巡雨!你這毒婦竟也來了闰渔?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,074評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤铐望,失蹤者是張志新(化名)和其女友劉穎冈涧,沒想到半個(gè)月后茂附,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,505評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡督弓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評(píng)論 3 335
  • 正文 我和宋清朗相戀三年营曼,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片愚隧。...
    茶點(diǎn)故事閱讀 39,841評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蒂阱,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出狂塘,到底是詐尸還是另有隱情录煤,我是刑警寧澤,帶...
    沈念sama閱讀 35,569評(píng)論 5 345
  • 正文 年R本政府宣布睹耐,位于F島的核電站辐赞,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏硝训。R本人自食惡果不足惜响委,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望窖梁。 院中可真熱鬧赘风,春花似錦、人聲如沸纵刘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽假哎。三九已至瞬捕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間舵抹,已是汗流浹背肪虎。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留惧蛹,地道東北人扇救。 一個(gè)月前我還...
    沈念sama閱讀 47,962評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像香嗓,于是被迫代替她去往敵國和親迅腔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案靠娱? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評(píng)論 1 92
  • 本文主要講解與flex布局相關(guān)的屬性沧烈,包括flex,flexDirection饱岸,alignItems掺出,justif...
    Gooooood閱讀 9,740評(píng)論 0 10
  • 本文只是簡單地介紹下在React-Native中徽千,使用CSS的Flex布局方式,完成RN中的控件布局汤锨,掌握這個(gè)布局...
    劉是丑閱讀 1,119評(píng)論 0 1
  • 一款好的APP離不了一個(gè)漂亮的布局双抽,本文章將向大家分享React Native中的布局方式FlexBox。 在Re...
    hx永恒之戀閱讀 627評(píng)論 0 0
  • 我們早早地預(yù)言了畢業(yè)后的彷徨闲礼,離心各自為戰(zhàn)牍汹,和活到臨頭各自飛——在一張烤魚桌上 故事總在夜里被提起如果從初三那年開...
    阿水閱讀 251評(píng)論 0 4