flexbox布局

Posted 2020-08-06 星空守候

flexbox布局(RN基础)

flexbox是Flexible Box的缩写， 弹性盒子布局 主流的浏览器都支持
flexbox布局是伸缩容器(container)和伸缩项目 (item)组成
Flexbox布局的主体思想是元素可以改变大小以适应可用空间， 当可用空间变大， Flex元素将伸展大小以填充可用空间， 当Flex元素超出可用空间时将自动缩小。 总之， Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。
按照伸缩流的方向布局
伸缩容器有主轴和交叉轴组成！ 主轴既可以是水平轴， 也可以是垂直轴
flexbox目 前还处于草稿状态， 所有在使用flexbox布局的时候， 需要加上各个浏览器的私有前缀， 即-webkit -moz -ms -o等

伸缩容器的属性

• 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（默认值）

  flexbox布局(伸缩属性)

  伸缩项目的属性

• 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 flexbasis， 其中第二个和第三个参数为可选参数， 默认值为： 0 1 auto
• 6.align-self
  用来设置单独的伸缩项目 在交叉轴上的对齐方式， 会覆盖默认的对齐方式， 其语法为： align-self:auto
  | flex-start | flex-end | center | baseline | stretch(伸缩项目 在交叉轴方向占满伸缩容器， 如果交叉轴为
  垂直方向的话， 只有在不设置高度的情况下才能看到效果)
  在React Native中使用 flexbox

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

• 1 .alignItems
  用来定义伸缩项目 在交叉轴上的对齐方式， 语法为： alignItems:flex-start（默认值） | flex-end |
  center | stretch
• 2.alignSelf
  用来设置单独的伸缩项目 在交叉轴上的对齐方式， 会覆盖默认的对齐方式， 其语法为： alignSelf:auto |
  flex-start | flex-end | center | stretch(伸缩项目 在交叉轴方向占满伸缩容器， 如果交叉轴为垂直方向的
  话， 只有在不设置高度的情况下才能看到效果)
• 3.flex
  是flex-grow flex-shrink flex-basis这三个属性的缩写， 其语法为： flex:none | flex-grow flex-shrink flexbasis， 其中第二个和第三个参数为可选参数， 默认值为： 0 1 auto
• 4.flexDirection
  指定主轴的方向 flex-direction:row| row-reverse | column（默认值） | column-reverse
• 5.flexWrap
• 6.justifyContent

来自为知笔记(Wiz)