粗略的總結了一下reactnative中的flexbox布局樣式風格，有些是在網上找的，但可以看明白的。
1.flexdirection:決定布局主軸方向,該屬性決定主軸的方向（即專案的排列方向）。
row：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column(預設值)：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
2.justifycontent：決定其子元素沿主軸的排列方式；
（1）flex-start(預設值)：伸縮專案向一行的起始位置靠齊。
(2) center: 伸縮專案向一行的中間位置靠齊。
(3) flex-end: 伸縮專案向一行的結束位置靠齊。
(4) space-around: 伸縮專案會平均地分布在行裡，兩端保留一半的空間。
(5) space-between: 兩端對齊，專案之間的間隔都相等。
(6) space-evenly：專案之間和兩端之間都是等間距分布
3.alignitems容器屬性:`flex-start | flex-end | center | baseline | stretch`
定義專案在交叉軸上如何對齊，可以把其想像成側軸（垂直於主軸）的「對齊方式」。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊 。
center：交叉軸的中點對齊。
baseline：專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
這裡不一一試了，如下圖（從網上弄下來的）：
4.flexwrap：預設情況下，容器中的item元素都排列在一條軸線上，flex-wrap屬性定義了如果在一條軸線上排列不下所有的item元素，可以進行換行排列
（1）nowrap（預設值）：不換行
（2）wrap：換行，第一行在上方
（3）wrap-reverse：換行，第一行在下方
小程式 View flex 布局
先做乙個簡單的 demo12 3加上背景色能看的更清楚些 複製 main item item1 item2 item3 複製 然後大概是這個樣子的 snip 20170213230726 然後我們先都加上 display flex 好使用 flex 布局，主意，貌似 view 不會自動繼承，需要在每...
前端布局 小技巧
這種方式最好應用於 按鈕 文字之類的居中模式，否則就需要借助inline block來進行居中布局。適用於塊級元素不給出寬高的情況下 需要借助transtrom的tanslatex方法 parent child 適用於塊級元素知道寬度 parent child 子元素寬度已知的情況下 parent ...
小談網頁布局
web前端的開發，ui是很重要的，乙個成功的ui往往就是專案成功的一半。在商業化的ui裡面，布局是乙個很重要的設計要素。一 整體布局 1.frameset布局 frameset是使用得最廣泛的布局模式。優點1.簡單 frameset的布局是瀏覽器一級的介面，我們不用關心但頁面溢位時，我們應該怎麼處理...