React-Native学习,RN的容器Flex-Box布局

news2024/11/26 8:24:45

justify-content(在RN中属性名称为:justifyContent)在主轴上对齐方式

align-items(在RN中属性名称为:alignItems)在交叉轴上的对齐方式

在React Native中,当没有设置容器的主轴方向时,默认容器主轴方向为:flexDrection: 'column',也就是说,当我们的容器的主轴的排布方向为竖直方向时,这时我们可以省略不写flexDirection属性


一.什么是FlexBox布局

flexbox是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。采用flex布局的元素,称为flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"。

下面FlexBox伸缩布局示例图:

 Flex容器默认存在两根轴:

水平方向的主轴,与主轴垂直方向的交叉轴。
主轴的排布方向是从左至右,交叉轴的排布方向是从上至下,Flex容器中的Item元素默认是按照主轴方向进行排序,Item占据主轴空间称为main size,Item占据交叉轴空间称为cross size

 

二.主要使用的flex容器属性:

1.flex-direction(在RN中属性名称为:flexDirection)

  • column:主轴为竖直方向,起点在上沿
  • column-reverse:主轴为竖直方向,起点在下沿
  • row:主轴为水平方向,起点在左端
  • row-reverse:主轴为水平方向,起点在右端

注意:在React Native中,当没有设置容器的主轴方向时,默认容器主轴方向为:flexDrection: 'column',也就是说,当我们的容器的主轴的排布方向为竖直方向时,这时我们可以省略不写flexDirection属性

2.flex-wrap(在RN中属性名称为:flexWrap)

默认情况下,容器中的Item元素都排列在一条轴线上,flex-wrap属性定义了如果在一条轴线上排列不下所有的Item元素,可以进行换行排列

  • wrap 换行
  • nowrap 不换行
  • wrap-reverse 换行第一行在下方

 

3.justify-content(在RN中属性名称为:justifyContent)在主轴上对齐方式 

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center:居中
  • space-between:两端对齐,Item之间的间隔都相等
  • space-around:每个Item两侧的间隔相等。Item之间的间隔比Item与边框的间隔大一倍

 

 4.align-items(在RN中属性名称为:alignItems)在交叉轴上的对齐方式

  • flex-start:(默认值)交叉轴的起点对齐
  • flex-end:交叉轴的终点对齐
  • center:交叉轴的中点对齐
  • baseline: 项目的第一行文字的基线对齐
  • stretch:如果项目未设置高度或设为auto,将占满整个容器的高度

 

三.主要使用的项目(Item)属性

1.flex

RN中使用flex: 1:当只有一个元素使用flex:1 则这个元素将充满整个屏幕,当有多个元素使用flex: 1 则这多个元素平分屏幕空间大小

2.alignSelf 项目自身交叉轴对齐方式

除了增加一个auto属性,其他都与align-items属性完全一致,具体的对齐方式与交叉轴的方向有关,下面假设交叉轴方向从上到下

  • flex-start:(默认值)交叉轴的起点对齐
  • flex-end:交叉轴的终点对齐
  • center:交叉轴的中点对齐
  • baseline: 项目的第一行文字的基线对齐
  • stretch:如果项目未设置高度或设为auto,将占满整个容器的高度

 覆盖alignitems,定义其控件自身的不同

参考链接:

 https://www.jianshu.com/p/e28ae6218852

http://chat.xutongbao.top/ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/742862.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Web-文件上传

需求 新增员工和修改员工的需求会需要上传对应的图像 先实现对应的新增需求吧 !!!RequestBody,因为传参是json格式,还是看对应接口文档!!! controller service mapper xml 对应代码 &…

Jstat命令解析

Jstat命令解析 Jstat是JDK自带的一个轻量级小工具。全称“Java Virtual Machine statistics monitoring tool”,它位于java的bin目录下,主要利用JVM内建的指令对Java应用程序的资源和性能进行实时的命令行的监控,包括了对Heap size和垃圾回收…

单元测试与端到端测试——主要区别

目录 前言: 什么是单元测试? 单元测试生命周期 单元测试的好处 那么它有什么好处呢? 单元测试示例 单元测试的类型 单元测试工具 什么是端到端测试? 端到端测试 端到端测试的主要好处是什么? 端到端测试示…

Tauri 应用中发送 http 请求

最近基于 Tauri 和 React 开发一个用于 http/https 接口测试的工具 Get Tools,其中使用了 tauri 提供的 fetch API,在开发调试过程中遇到了一些权限和参数问题,在此记录下来。 权限配置 在 tauri 应用中,如果想要使用 http 或 fe…

小白到运维工程师自学之路 第四十九集 (正则表达式之grep)

一、概述 1、正则表达式(Regular Expression,简称为RegExp或Regex)是一种用于描述、匹配和操作文本的字符串模式的表达式。它提供了一种强大而灵活的方式来进行字符串的搜索、替换、提取和验证操作。 2、正则表达式可以用于各种编程语言和应…

SpringBoot第25讲:SpringBoot对TypeHandler的使用

SpringBoot第25讲:SpringBoot对TypeHandler的使用 本文是SpringBoot第25讲,SpringBoot对TypeHandler的使用,TypeHandler就是当SpringBoot 实体类中字段类型和数据库中字段类型不一致时进行使用。 文章目录 SpringBoot第25讲:Sprin…

基环树学习笔记

0.前言 只因环树学习笔只因。 如有错误欢迎指出。 1.基本概念 这名字读起来感觉有点矛盾,怎么可能树上面有一个环呢? 我们把它放到百度翻译里面看看。 顾名思义,基环树不是一棵树,而是一颗假树,他的定义是&#…

Acwing.861 二分图的最大匹配(匈牙利算法)

题目 给定一个二分图,其中左半部包含nq个点(编号1n1),右半部包含ng个点(编号1n2),二分图共包含m条边。 数据保证任意—条边的两个端点都不可能在同一部分中。请你求出二分图的最大匹配数。 给定一个二分图G,在G的一个子图M中&…

软件测试基础认知

日升时奋斗,日落时自省 目录 1、测试需求 2、测试用例 3、软件测试BUG 4、开发模型 4.1、软件的生命周期 4.2、瀑布模型(waterFall Model) 4.3、螺旋模型 4.4、 增量模型 4.4.1、增量开发 4.4.2、迭代开发 4.5、敏捷开发&#xf…

【PDFBox】PDFBox操作PDF文档之创建PDF文档、加载PDF文档、添加空白页面、删除页面、获取总页数、添加文本内容、PDFBox坐标系

这篇文章,主要介绍PDFBox操作PDF文档之创建PDF文档、加载PDF文档、添加空白页面、删除页面、获取总页数、添加文本内容、PDFBox坐标系。 目录 一、PDFBox组件 1.1、什么是PDFBox 1.2、创建PDF文档 1.3、加载PDF文档 1.4、添加空白页面 1.5、删除某个页面 1.6…

三分钟了解 SpringBoot 的启动流程

一、前言 背景:最近有位开发同学说面试被问到Spring Boot 的启动流程,以及被问到Spring Boot 的嵌入式Web容器是什么时候加载的。如何加载的。是怎么无缝切换的。 这些问题,其实回答起来也是比较复杂的。我们今天就从 SpringApplication.ru…

3D设计建模软件The Foundry Modo 16对Mac和Windows的系统要求

Foundry MODO是一款功能强大的三维建模、动画和渲染软件。它为艺术家和设计师提供了一套全面的工具,可以用来创建令人惊叹的视觉效果。无论是制作电影、电视节目、游戏还是其他数字媒体内容,MODO都可以满足您的需求。 MODO具有直观的用户界面&#xff0…

redis主从配置

从redis配置:redis6386.conf include /data/redis/redis6380.conf #主redis配置文件路径(这里是引用主配置文件里的配置在修改从配置) daemonize yes #在后台启动 protected-mode no #加密保护关闭 bind 192.168.3.*** requirepas…

云主机安全-私有密钥安全认证

场景描述 云主机凭借其性价比高、生配扩容便利、运维便捷、稳定性高等优势深受用户青睐,越来越多的企业开始租用云主机,将自己的服务器、业务系统等搭建或存储到云主机上。 用户痛点 用户租用或托管的云主机,运维端口(远程桌面&…

SSM框架最新整合保姆级教程(IDEA版)

SSM框架最新整合保姆级教程(IDEA版) 一、环境要求 ​ 环境: IDEAMySQL 5.7.19Tomcat 9Maven 3.6 要求: 需要熟练掌握MySQL数据库,Spring,JavaWeb及MyBatis知识,简单的前端知识; 完整代码:…

Openlayers实战:绘制带箭头的线

Openlayers地图中有的时候会用到这样的场景,连续画几段线段,但是要知道绘制的方向,给人以指引的提示作用。 怎么绘制呢? 在本实战中,主要的是处理线段的显示方式,在线段的拐点处附加上箭头图片,具体看实际的源代码。 效果图 源代码 /* * @Author: 大剑师兰特(xiaozhu…

4 生成全排列

4 生成全排列 作者: 赵晓鹏时间限制: 1S章节: 递归与分治 输入范例 : 无 输出范例 : Perm1(1):123 Perm1(2):123 Perm1(2):213 Perm1(2):321 Perm1(3):123 Perm1(3):132 Perm1(3):213 Perm1(3):231 Perm1(3):321 Perm1(3):312 Online Judge 1.0 #include<iostream> …

【全栈开发指南】数据权限使用配置

数据权限配置有两种方式&#xff1a; 通过系统配置界面&#xff0c;实时配置生效。 通过代码注解配置。 一、通过系统配置界面配置数据权限 系统配置的数据权限是通过系统配置界面将配置信息保存在数据库&#xff0c;然后系统启动时&#xff0c;将配置信息保存到Redis缓存来…

SpringCloud分布式搜索引擎、数据聚合、ES和MQ的结合使用、ES集群的问题

目录 数据聚合 聚合的分类 ​编辑 DSL实现Bucket聚合 ​编辑 DSL实现Metrics聚合​编辑 RestAPI实现聚合 对接前端接口​编辑 自定义分词器​编辑 Completion suggester查询 Completion suggester查询 酒店数据自动补全 实现酒店搜索框界面输入框的自动补全 数据同步问…

Codeforces Round 875 (Div. 1) A. Copil Copac Draws Trees

题意 Copil Copac 给定了一个由 n−1 条边组成的列表&#xff0c;该列表描述了一棵由 n 个顶点组成的树。他决定用下面的算法来绘制它&#xff1a; 步骤 0&#xff1a;绘制第一个顶点&#xff08;顶点1&#xff09;。转到步骤1。 步骤 1&#xff1a;对于输入中的每一条边&#…