一.flex布局
什麼是flex布局?布局的傳統解決方案,是基於盒子模型,依賴display屬性+position屬性+float屬性,這種布局方式對於特殊布局非常不方便,
比如,垂直居中就不好實現.2023年,w3c提出的flex布局,即彈性布局,用來為盒子模型提供最大的靈活性,任何乙個容器都可以指定為flex布局.
1.容器的屬性(6個)
reatnative的flex布局和web的略有不同,下面的這些屬性在rn中不用寫中間」-「,並且第二個單詞 首字母大寫
flex-direction:子專案的在主軸的排列方式
row (預設值):主軸為水平方向,起點在左端
row-reverse:主軸為水平方向,起點在右端(rn似乎不支援)
column:主軸為垂直方向,起點在上沿
column-reverse:主軸為垂直方向,起點在下沿(rn也不支援)
flex-wrap:預設,專案都排在一條線上(又稱」軸線」)上
nowrap 不換行 (預設)| wrap換行 | wrap-reverse 換行,第一行在下方
rn似乎也不支援
flex-flow:屬性是flex-direction和flex-wrap的簡寫形式,預設是row nowrap,rn沒試過
justify-content:定義專案在主軸上的對齊方式
flex-start(預設值) 左對齊 | flex-end (右對齊) | center(居中) | space-between (兩端對齊,專案之間間
隔相等) | space-around (每個專案兩側的間隔相等,所以專案之間的間隔比專案與邊框的間隔大一倍)
align-items:定義專案在交叉軸上如何對齊
flex-start (交叉軸的起點) | flex-end (終點) | center(中點對齊) | baseline(專案的第一行文字的基線對齊) | stretch (預設值)如果專案
未設定高度 或者設為auto,將佔滿整個容器
align-content:定義了多根軸線的對齊方式,如果專案只有一根軸線,該屬性不起作用
flex-start | flex-end | center | space-between | space-around
3.專案的屬性(6個)
order:定義專案的排列順序,數值越小,排列越靠前,預設為0
flex-grow:定義專案的放大比例,預設為0,即如果存在剩餘空間也不放大,如果都為1,則他們將等分剩餘空間.如果乙個為2,其他為1,則前
者佔據的剩餘空間比其他多一倍
flex-shrink:定義專案的縮小比例,預設為1,即如果空間不足,專案將縮小.如果都為1,等比縮小,如果乙個為0,其他為1,則前者不縮小,負值
無效flex-basis:定義在分配多餘空間之前,專案佔據的主軸空間,瀏覽器將根據這個屬性,計算主軸是否有多餘空間,它的預設值為auto,即專案
本來大小,也可以設定固定空間,即width和height
flex:是flex-grow,flex-shrink,flex-basis的簡寫,預設為0 1 auto ,後兩個屬性可選,該屬性有快捷值,auto (1 1 auto) 和none (0 0 auto)
align-self:允許單個專案與其他專案不一樣的對齊方式,可覆蓋align-items 屬性,預設值為auto,表示繼承父元素的align-items屬性,沒
有父元素則等同於stretch
auto | flex-start | flex-end | center | baseline | stretch
的屬性:
resizemode
cover:cover會被截斷
strech:stretch模式被拉伸適應螢幕
contain:contain 模式容器完全容納，自適應寬高
4.絕對定位與相對定位
不用在父容器中設定absolute或者relative,直接是相對于父容器定位
react native之flex布局總結
style style style style view 當 flexdirection 為 row 的時候，為橫向布局 當 flexdirection 為 column 的時候，為縱向布局 style style style style view 而如果此時 flexdirection colum...
React Native布局實戰
前輩教導我們，掌握一門新技術的最快方法是練習。因此，我找了下比較有愛，暖氣的介面。當然不是給美團打廣告了，只是覺得頁面蠻清新的。下面就是要顯示的效果 第三篇文章基本上對react native的布局基本上有個大致的認識，現在開工吧。總體上，該頁面分三個部分 1 我們約會吧及其右邊3欄 2 1元吃大餐...
React Native布局詳解
flexbox 布局 flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器屬性 簡述 常用 ...