对前端一窍不通，还望各位神指点一二🙂
首先声明，部分资料与图片来自小码哥，需要学习的朋友，文章最下面有链接，还望下载资料。
FlexBox布局，就是决定父盒子和子盒子的关系的
FlexBox核心思想，在CSS是块，内联流的方向，Flex布局是基于flex-flow流（主轴是竖直方向，辅轴就是平直方向，当主轴是平直方向，那么辅轴就是竖直方向）
FlexBox
FlexBox
一、FlexBox布局
1.1 FlexBox是什么意思呢？
flexible（形容词）：能够伸缩或者很容易变化，以适应外界条件的变化
box（名词）：通用的矩形容器
1.2什么是FlexBox布局?
弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。
Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间；
React native中的FlexBox是这个规范的一个子集。
1.3大部分情况下是处理图中FlexItem在FlexContainer中的位置和尺寸关系
FlexContainer
二、属性定义
a）
flexDirection：该属性决定主轴的方向
row: 主轴为水平方向，起点为左端。
row-reverse: 主轴为水平方向，起点在右端
column：主轴为竖直方向，起点在上沿。（默认）
column-reverse：主轴为竖直方向，起点在下沿。
flexDirection:’row’ (主轴方向为水平方向，起点为左端 )
当View包含View1，和View2的时候，
1，若子控件并未设备高度，则会与父控件的高度相同
2，若子控件并未设备宽度，则会按照控件中的内容进行宽度设置（例如按照文字的总高度）
flexDirection
b)
marginTop: 上间距，
c)
justifyContent：定义伸缩项目在主轴上的对齐方式
flex-start: 伸缩项目向一行的起始位置靠齐
flex-end: 伸缩项目向一行的结束位置靠齐
center: 伸缩项目向一行的中间位置靠齐
space-between: 两端对齐，项目之间的间隔都相等
space-around: 伸缩项目会平均的分布在行里，两端保留一半的空间
justifyContent
d)
alignItems:定义伸缩项目在交叉轴（侧轴，垂直于主轴的轴）上的对其方式
flex-start: 交叉轴的起点对齐
flex-end: 交叉轴的终点对齐
center: 交叉轴的中点对其
baseline: 项目中第一文字的基线对其
stretch: 如果项目中未设置高度或者设置为auto，将占满整个容器的高度（默认）
alignItems
e)
flex-wrap:默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下该如何换行
nowrap: 不换行
wrap: 换行
wrap-reverse:换行，第一行在下方
flex-wrap
nowrap(默认值)：不换行。
nowrap
wrap：换行，第一行在上方。
wrap
wrap-reverse：换行，第一行在下方。（和wrap相反）
wrap-reverse
子控件相关属性
元素属性：
a)
flex: 用来决定盒子宽度（宽度= 弹性宽度=flexGrow/sum(flexGrow)））默认值（0，“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写，其中第二个和第三个参数（flex- shrink、flex-basis）是可选参数。
默认值为“0 1 auto”。
宽度＝弹性宽度* ( flexGrow / sum(flexGorw) )
flex:
b)
alignSelf: 单个项目在垂直于主轴的的轴上的对其方式
flex-start:父控件顶部
flex-end:父控件底部
center:父控件中间
auto:继承父元素的alignItems属性
baseline:第一行文字的基线
stretch:按照父控件的相关尺寸
alignSelf
Text相关属性
Text相关属性
三，开发中如何获取屏幕的宽，高，分辨率
开发中如何获取屏幕的宽，高，分辨率
感谢各位的阅读，如有不当之处还望各位多多指教
相关百度云资料：链接: https://pan.baidu.com/s/1o8EWYCi 密码: u38t
网友评论