RN入門基礎6 使用Flexbox布局

2021-08-21 23:48:40 字數 2343 閱讀 5832

flexbox可以指定某個元件的子元素的布局。

flexbox可以在不同螢幕尺寸上提供一致的布局結構。

一般來說,使用flexdirectionjustifycontentalignitems三個樣式屬性就已經能滿足大多數布局需求。

注意:react native中的flexbox的工作原理和web上的css基本一致,當然也存在少許差異。首先是預設值不同:flexdirection的預設值是column而不是row,而flex也只能指定乙個數字值。

1.flex direction(決定布局的主軸

在元件的style中指定flexdirection可以決定布局的主軸

設定子元素是沿著水平軸(row)方向排列,或者沿著豎直軸(column)方向排列。

預設值是豎直軸(column)方向。

2.justify content(子元素沿著主軸排列方式

在元件的style中指定justifycontent可以決定其子元素沿著主軸排列方式

子元素是應該靠近主軸的起始端還是末尾段分布呢?亦或應該均勻分布?

對應的這些可選項有:flex-startcenterflex-endspace-around以及space-between

3.align items(子元素沿著次軸排列方式。)

在元件的style中指定alignitems可以決定其子元素沿著次軸排列方式

次軸:(與主軸垂直的軸,比如若主軸方向為row,則次軸方向為column

子元素是應該靠近次軸的起始端還是末尾段分布呢?亦或應該均勻分布?

對應的這些可選項有:flex-startcenterflex-end以及stretch

注意:要使stretch選項生效的話,子元素在次軸方向上不能有固定的尺寸。

以下面的**為例:只有將子元素樣式中的width: 50去掉之後,alignitems: 'stretch'才能生效。

額外**:

flex direction(決定布局的主軸

justify content(子元素沿著主軸排列方式

align items(子元素沿著次軸排列方式。)

為了簡單,我將三種常用布局方式寫在乙個類裡

export default class myprojectname extends component );}

};

效果:

從上到下,依次是flex direction,justify content,align items

java入門基礎 6

1.區域性變數 形參或者其他與屬性 方法或者其他重名 導致直接通過名第一行 字訪問出現歧義 name shadow 命名遮擋 關鍵字 this 通過this全名稱訪問屬性 方法 通過this 呼叫其他的構造方法 但是this的呼叫,必須出現在構造方法的 第一行 this代表的就是這個物件本身 1.s...

python入門基礎6

在程式執行過程中發生的任何錯誤都是異常。每個異常顯示一些相關的錯誤資訊,比如你在 python3 中使用 python2 獨有的語法就會發生syntaxerror 不小心在行首多打了乙個空格就會產生indentationerror 當訪問乙個未定義的變數則會發生nameerror 最後一行包含了錯誤...

RN入門基礎5 指定 彈性寬高

目錄 一 介紹 二 舉例 元件的高度和寬度決定了其在螢幕上顯示的尺寸。元件的寬高分為兩種,指定寬高和彈性寬高 1.指定寬高 是指在樣式中指定固定的width和height。react native中的尺寸都是無單位的,表示的是與裝置畫素密度無關的邏輯畫素點。這樣在不同尺寸的螢幕上都顯示成一樣的大小。...