RN布局(二) 伸縮容器的屬性

2021-07-31 14:24:56 字數 816 閱讀 6476

1.display

display:flex | inline-flex

塊級伸縮容器 行內級伸縮容器

2.flex-direction

指定主軸的方向 flex-direction:row(預設值)| row-reverse | column | column-reverse

3.flex-wrap

伸縮容器在主軸線方向空間不足的情況下,是否換行以及該如何換行

flex-wrap:nowrap(預設值) | wrap | wrap-reverse

4.flex-flow

是flex-direction和flex-wrap的縮寫版本,它同時定義了伸縮容器的主軸和側軸

,其預設值為 row nowrap

5.justify-content

用來定義伸縮專案在主軸線的對齊方式,語法為:

justify-content:flex-start(預設值) | flex-end | center | space-between | space-around

6.align-items

用來定義伸縮專案在交叉軸上的對齊方式,語法為:

align-items:flex-start(預設值) | flex-end | center | baseline | stretch

7.align-content

用來調整伸縮專案出現換行後在交叉軸上的對齊方式,語法為:

align-content:flex-start | flex-end | center | space-between | space-around | stretch(預設值)

React Native 的布局(容器屬性)

flexbox 介紹 flexbox是由伸縮容器和伸縮專案組成。任何乙個元素都可以使用flexbox布局。容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main start,結束位置叫做main end 交叉軸的開始位置...

Flex 布局 容器屬性

flex 布局,意為 彈性布局 任何乙個容器都可以指定為 flex 布局,行內元素也可以使用 flex 布局。注意 設為 flex 布局後,子元素的 float clear 和 vertrical align 屬性都將失效。採用 flex 布局的元素,稱為 flex 容器,簡稱容器 它的所有子元素自...

關於flex布局容器屬性

容器屬性 flex direction 決定主軸的方向 row 從下到上 row reverse 從上到下 column 從左到右 column reverse 從右到左 flex wrap 如果一行排列不下如何換行 nowrap 不換行 wrap 換行 wrap reverse 換行,第一行在下面...