React Native 之 Flexbox(弹性盒子布局)

Flexbox可以在不同屏幕上提供一致的布局结构，一般使用flexDirection、justifyContent、alignItems三个样式来辅助设计。

1.flexDirection：在组件的style中设置可以决定其子组件的主布局（主轴），默认是竖直方向 - 纵轴‘colunm’（从上到下依次排列子组件），另一个是横向 - 横轴‘row’（从左到右依次排列子组件）。
  

2.justifyContent：决定子组件按照主轴的排列方式

A.flex-start:  从起始 -> 结尾方向开始排列

B.flex-end： 从结尾 -> 起始方向排列

C.center： 从中间 -> 两边排列

D.space-between: 从两边 -> 中间排列

E.space-around:  不知如何描述

    

3.alignItems：子组件沿着次轴的排列方式（主轴row，次轴colunm）

A.flex-start:  从起始 -> 结尾方向开始排列 （可以这么理解：子组件依次靠近起始方向）

B.flex-end： 从结尾 -> 起始方向排列

C.center： 从中间 -> 两边排列

D.stretch:  充满剩余空间 （这个要和子组件自行设定width、height配合使用）

   

时间： 2025-01-31 02:49:23

React Native 之 Flexbox(弹性盒子布局)的相关文章

flexbox 弹性盒子布局

父元素: display: -webkit-flex; ①子元素: flex:1:(设置占比) 计算规则: 父元素会将所有子元素的flex 相加求和后,算其子元素比例. ②flex混合划分:第一个子元素 width:100px;第二个子元素 flex:2第三个子元素 flex:1 关于不定宽高的水平垂直居中 解决方案: ① 寻常方法 父元素 position: relative: 子元素 position: absolute: left: 50%: top: 50%://在父元素基础上,往左往上

flexbox弹性盒子布局

之前我们是这样实现一个div盒子水平垂直居中的.在知道对象高宽的情况下,对居中元素绝对百分比定位,然后通过margin偏移的方式来实现. 假如使用了flex后,实现起来就简单了,而且不需要自己去算,也不需要绝对定位,只需要通过对伸缩容器定义两个属性,justify-content定义伸缩项目沿着主轴线的对齐方式为center, align-items定义伸缩项目在侧轴(垂直于主轴)的对齐方式为center,具体如下: 关于伸缩项目的相关属性,主要是3个,order,flex(flex-grow,

CSS Flexbox 弹性盒子模型

CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. flex-direction: 值 row | row-reverse | column | column-reverse默认值 row flex-wrap: 值 nowrap | wrap | wrap-reverse默认值 nowrap flex-flow: 值 <flex-direction>

弹性盒子布局解决不规则图片的等比例缩放的利器！

我们经常遇到这种需求: 在一个固定大小(固定比例)的容器里面展示图片,图片的大小比例都不是固定的,需要按容器的比例等比例缩图片上下左右居中显示. 在没有弹性盒子布局的年代,额的做法: 1:水平居中,非常好解决,容器 text-align: center; 2:垂直居中,容器display: table-cell; 图片vertical-align: middle; 3:等比例缩放,js解决,思路: (1)如果图片宽高都没有超过容器大小,则忽略 (2)如果图片的宽度或者高度其中有一方超过容器大小,

css横向 弹性盒子布局的一些属性

<head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/> <meta name="format-detection" content=&qu

[RN] React Native 使用 FlatList 实现九宫格布局

React Native 使用 FlatList 实现九宫格布局 先看图片演示实例: 本文以图片列表为例,实现九宫格布局! 主要有两种方法: 1)方法一: 利用FlatList的 numColumns ={2} // 一行2个 2)方法二: 利用 FlatList的 contentContainerStyle={styles.listViewStyle} 其中样式如下: listViewStyle: { // 主轴方向 flexDirection: 'row', // 一行显示不下,换一行 fl

CSS3总结五：弹性盒子(flex)、弹性盒子布局

弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-content flex-flow 弹性盒子子项的属性与应用 order align-self flex flex-grow flex-shrink flex-basis 弹性盒子布局 flex居中/T字布局 可动态增加导航栏 等分布局 圣杯布局 流式布局 一.弹性盒子容器的属性与应用 1.1.定义弹性盒

弹性盒子布局(flex布局)

弹性盒子布局方式:.box{ display:flex;}@设为Flex布局后,子元素的float.clear和vertical-align属性将失效@采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目".@容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做m

React Native之FlexBox介绍与使用

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 什么是 FlexBox 布局 在 html 中,界面的搭建都是采用 CSS 的布局方式,CSS 是基于盒子模型,依赖于 dis