FlexBox - react

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yeluoxiaoxin/article/details/76532022

FlexBox被称为弹性盒模型,flexbox布局旨在提供一个更加有效的方式制定、调整分布在项目中的布局,即便这个布局是未知或是动态的,主要思想是让容器有能力让其子项目改变其宽度、高度,以此来实现布局更好的适应各种屏幕。
flexbox基础概念包括:
Main Axis:主轴,伸缩容器的主轴,容器一般沿着这条轴线进行布局。
Main Start:主轴开始的位置。
Main End:主轴结束的位置。
Cross Axis:侧轴,垂直于主轴的轴被称为侧轴,侧轴一般不发生变化
Cross Start:侧轴开始的位置。
Cross End:侧轴结束的位置。
Flex Container:伸缩的容器。
Flex Item:伸缩的项目。
Main Size:沿主轴方向的长度。
Cross Size:沿侧轴方向的长度。(贴图:更清晰的认识)
这里写图片描述

如图可以了解到整个布局类似我们使用的LinearLayout布局,其中的Flex Container和Flex Item就好比属性gravity和layout_gravity,这样比较下来我们就很容易上手了。
一、下面介绍 Container的属性
1、flexDirection 属性(row,column):定义子元素沿轴排列的方式
决定主轴的方向,默认为column(即main axis为纵轴)由上到下排列 则row主轴(main axis为横轴)由左到右排列 column-reverse纵轴由下到上排列,row-reverse横轴由右向左
2、flexWrap属性定义子元素在父容器中是否多行显示默认为nowrap
nowrap:只允许一行显示
wrap:一行不够时自动换行排列
3、justifyContent属性 指元素在主轴线上的对齐方式
默认flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,元素之间间隔相等
space-around:每个元素两侧间隔相等(类似于marginLeft和marginRight相同)
4、alignItems 定义了子元素在侧轴的对齐方式
默认值 flex-start :侧轴起点对齐
flex-end:侧轴终点对齐
center:侧轴中点对齐
stretch:未设置高度的时候,会填充满容器整个高度
二、 Item属性
1、flex:即子元素占剩余空间的比例(类似于权重)
flex后跟数字1 2 3 4
示例:
这里写图片描述

结果:
这里写图片描述

2、alignSelf
定义子元素在容器中的对齐方式
默认值 auto 继承父元素的alignItem ,父元素没有这个属性则等同于stretch
flex-start :顶部
flex-end :底部
center:居中
stretch:填充高度
效果:
这里写图片描述

FlexBox 属性主要用到的两个可以满足大部分的布局视图,属于基础性的内容,简单列出也算做事学习笔记,有遗漏处,还望指出!

猜你喜欢

转载自blog.csdn.net/yeluoxiaoxin/article/details/76532022