FlexBox 布局属性概念梳理

React Native 之 Flexbox布局

简介：Flexbox 是Flexible Box 的缩写，翻译过来就是“弹性布局”，用来为盒状模型提供最大的灵活性。 是2009年由W3C提出的一种新方案，来实现浏览器上的各种伸缩等页面布局，截止到目前，基本大多数都支持这种方案。

前提概念

盒状容器默认存在两根轴：水平主轴和垂直交叉轴。主轴的开始位置（与边框的交叉点）叫做 mian start，结束的位置叫做main end,交叉轴开始的位置叫做cross end。

项目默认沿主轴排列。单个项目占据主轴的空间叫做main size，占据的交叉轴空间叫做cross size

flex属性

1. flex-direction -> 决定主轴的方向
2. flex-wrap ->决定是否换行
3. flex-flow ->flex-direction 与flex-wrap的结合
4. justify-content ->主轴上的对齐方式
5. align-items ->交叉轴上的对其方式
6. align-content ->多根轴的对齐方式，如果项目只有一根轴线，该属性不起作用

flex-direction

包含属性 ：

• row
  
  • （默认）主轴为水平方向，从左往右排列
• row-reverse
  
  • 主轴为水平方向，从右往左排列
• column 
  • 主轴为垂直方向，从上往下排列
• column-reverse
  • 主轴为垂直方向，从下往上排列

flex-wrap

包含属性

• nowrap
  
  • （默认）不换行
• wrap
  
  • 换行，第一行在上方
• wrap-reverse 
  • 换行，第一行在下方

---

flex-flow ：flex-direction与flex-wrap结合简写形式，默认值为row nowrap

---

justify-content

包含属性

• flex-start
  
  • （默认）左对齐
• flex-end
  
  • 右对齐
• center 
  • 水平居中
• space-between 
  • 两边贴着边框，item相同的间隔
• space-around
  
  • item 间隔相同，item距边框距离等于item间隔一半

align-items

包含属性

• flex-start
  
  • 交叉轴的起点对齐
• flex-end
  
  • 交叉轴终点对齐
• center 
  • 交叉轴中间对齐
• baseline
  
  • 第一行文字基准线对齐
• stretch
  
  • （默认）如果未设置高度，则拉伸充满整个容器

align-content

包含属性

• flex-start
  
  • 交叉轴的起点对齐
• flex-end
  
  • 交叉轴终点对齐
• center 
  • 交叉轴中间对齐
• space-between 
  • 与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around
  
  • 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
• stretch
  
  • 轴线占满整个交叉轴

---

---

---

伸缩项目的属性

1.order
定义项目的排列顺序，数值越小，排列越靠前，默认值为0。语法:order:整数值
2.flex-grow
定义伸缩项目的放大比例。默认值为0，即表示如果存在剩余空间，也不放大 语法：flex-grow：整数值
3.flex-shrink
定义伸缩项目的伸缩能力，默认值为1，即表示如果存在空间不足是，进行收缩，其语法flex-shrink:整数值
4.flex-basis
用来设置伸缩项目的基准值。剩余的空间按比率进行伸缩，其语法为：flex-basis:length |auto,默认值为auto
5.flex
是flex-grow flex-shrink flex-basis 这三个属性的缩写，其语法为：flex :none |flex-grow flex-shrink flex-basis,其中第二个和第三个参数为可选参数，默认值为：0 1 auto
6.align-self
用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：
align-self: auto | flex=start | flex-end | center | baseline | stretch

在React Native 中使用 Flexbox

RN目前主要支持flexbox的如下6个属性

• alignItems

用来定义伸缩项目在交叉轴上的对齐方式，其语法：
alignItems ：flex-start(默认值)|flex-end|center|strentch

• alignSelf

用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，具体语法为：alignSelf : auto | flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的话，只有在不设置高度的情况下才能看到效果)

• flex

是flex-grow flex-shrink flex-basis 这三个属性的缩写，其语法为：
flex：none|flex-grow|flex-shrink flex-basis，其中第二个和第三个参数为可选参数，默认值为： 0 1 auto

• flexWrap

决定是否换行,语法为：
flexWrap : nowrap(默认)不换行 |wrap|wrap-reverse

• flexDirection

指定主轴的方向 flex-direction :row| row-reverse |column(默认值)|column-reverse

• justfyContent

多根轴的对齐方式，如果项目只有一根轴线，该属性不起作用,语法为:
justfyConent : flex-start | flex-end | center | space-between | space-around | stretch