成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react-native 布局篇之flexbox

Near_Li / 1171人閱讀

摘要：布局直接閱讀大神文章阮一峰寫的布局。有幾個注意的點(diǎn)，我在剛剛開始中總結(jié)的容器屬性，，布局方式主軸對齊方式交叉軸對齊方式這里需要特別注意的就是主軸和交叉軸。特別注意的作用對象是主軸在中設(shè)置是水平方向上占滿整個容器。

FlexBox布局

直接閱讀大神文章：阮一峰寫的FlexBox布局。在react-native中原理是一樣的，只不過可能有寫屬性在react-native中簡化了。
有幾個注意的點(diǎn)，我在剛剛開始flexbox中總結(jié)的：

容器(container)屬性

flexDirection ，justifyContent，alignItems

flexDirection flex布局方式

justifyContent 主軸對齊方式

alignItems 交叉軸對齊方式
這里需要特別注意的就是主軸和交叉軸。以下舉具體示例說明：

flexDirection:"column"（默認(rèn)值），垂直居中對齊：justifyContent:"center",水平居中對齊：alignItems:"center"
flexDirection:"row"，垂直居中對齊：alignItems:"center"，水平居中對齊：justifyContent:"center"

項(xiàng)目(item)屬性

flex

為什么設(shè)置flex:1占滿整個容器
很多時(shí)候我們經(jīng)常直接寫flex:1占滿整個容器，那為什么寫flex:1,不寫flex:2或者flex:3呢？首先我們要了解flex屬性是比例值，假設(shè)現(xiàn)在有兩個項(xiàng)目，分別設(shè)置屬性flex:1,flex:2,那么第一項(xiàng)就占據(jù)整個容器的1/3,第二項(xiàng)占據(jù)整個容器2/3。這下知道為什么flex:1占滿整個容器了吧，因?yàn)槭?b>1/1。所以如果容器只有一個項(xiàng)目那么flex:1,flex:2,flex:3都是占滿整個容器，因?yàn)榉謩e的意思是：1/1,2/2,3/3。

特別注意flex:1的作用對象是主軸
在flexDirection:"row"中設(shè)置flex:1,是水平方向上占滿整個容器。在flexDirection:"column"中設(shè)置flex:1,是垂直方向上占滿整個容器。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84166.html

相關(guān)文章

  • react-native 布局篇之position

    摘要：先簡單的看一下示例圖相對布局。這個是相對于父容器進(jìn)行據(jù)對布局。絕對布局是脫離文檔流的，不過奇怪的是依舊在文檔層次結(jié)構(gòu)里面，這個和的也很大不一樣。 position布局 position:enum(absolute,relative)。先簡單的看一下示例圖 showImg(https://segmentfault.com/img/remote/1460000010270428); po...

    Lemon_95 評論0 收藏0

  • [RN] React Native style -- 樣式的使用

    摘要：表示在上的對齊方式，基于的頂部基于的底部基于的中部布滿整個。的屬性所占的比例大小。它允許項(xiàng)目中當(dāng)個和其他不一樣的對齊方式，會覆蓋的屬性。 React-Native 樣式的使用。 React-Native 編寫的應(yīng)用的樣式不是靠css來實(shí)現(xiàn)的，而是依賴javascript來為你的應(yīng)用來添加樣式，先不討論這樣做的好處與壞處，因?yàn)檫@個實(shí)現(xiàn)方法本身就存在著很多爭議，我們主要關(guān)注他的樣式的語法和...

    FrozenMap 評論0 收藏0

  • react-native電影簡介app，了解一下？（android端）

    摘要：寒假結(jié)束了，在寒假期間玩了一下，模仿豆瓣實(shí)現(xiàn)了一個查看當(dāng)前熱門電影和即將上映電影的簡單，項(xiàng)目比較簡單，十分適合剛剛?cè)腴T的同學(xué)查看。 寒假結(jié)束了，在寒假期間玩了一下react-native，模仿豆瓣實(shí)現(xiàn)了一個查看當(dāng)前熱門電影和即將上映電影的簡單app，項(xiàng)目比較簡單，十分適合剛剛?cè)腴T的同學(xué)查看。首先我們要了解react-native： react-native中文網(wǎng)、react-nativ...

    RayKr 評論0 收藏0

  • react-native 開發(fā)筆記（一）

    摘要：顏色問題這個不算問題了，算是優(yōu)勢。一般做開發(fā)，如果不是圖標(biāo)字體的話，我們會為圖片的選中和不選中準(zhǔn)備兩張圖片做切換。這可能會導(dǎo)致開發(fā)者很困惑，怎么高度和我想的不一致呢那只要把剩余的高度都設(shè)置準(zhǔn)確，這些都會迎刃而解。 react-native 開發(fā)筆記 開始使用react-native開發(fā)產(chǎn)品，講講今天遇到的坑 TabBarIos的使用 一般app的設(shè)計(jì)都是主頁是一個tab頁面，我們的ap...

    waltr 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<