reactnative布局
1.flexDirection 设置主轴的⽅向
flex布局对齐方式2.justifyContent 设置主轴的对齐⽅式
3.alignItems 设置主轴垂直⽅向的对齐⽅式(也叫侧轴)
alignSelf 设置⾃⼰单独的侧轴对齐⽅式
4.marginTop 上边距
5.flexWrap : nowWrap(不换⾏) | wrap (第⼀⾏在上⾯) | wrap-reverse (第⼀⾏在下⽅)
默认情况下,项⽬都是排在⼀条线上的(⼜称“轴线”)上,flex-wrap属性定义,如果⼀条轴线排不下,如何换⾏。
6.flex
(1)flex 是宽度,是 flex-grow ,flex-shrink, flex-basis 三个属性的缩写,其中第⼆个和第三个参数 (flex-shrink, flex-basis)是可选参数。
(2)默认值是 “0 1 auto”
(3)宽度 = 弹性宽度 (flexGrow / sum(flexGrow))
宽度 = (⽗盒⼦的宽度-其他元素的宽度)(元素flex=3 / 设置了flex元素的flex和为5)
FlexBox 布局基本⽤法
1、什么是FlexBox
Flexbox是Flexible Box的缩写,意为'弹性布局',它为盒状模型提供了很⼤的灵活性,让任何⼀个容器都可以指定为Flex布局
任何⼀个容器都可以指定为Flex布局
2、基本概念和属性
使⽤Flex布局的元素,称为Flex容器(flex Container),简称'容器'。它的所有⼦元素⾃动成为容器的成员,称为Flex 项⽬(flex Item)
先了解下标准的盒⼦模型:
image
image
image
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论