FlexBox布局

1. 什么是FlexBox布局?

  弹性盒模型(The Flexible Box Module),又叫FlexBox,意为"弹性布局",旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒模型提供最大的灵活性.

  Flex布局主要思想是: 让容器有能力让其子项目能够改变其宽度,高度(甚至是顺序), 以最佳方式填充可用空间;

  React Native中的FlexBox是这个规范的子集.

2. FlexBox在开发中的应用场景

2.1 FlexBox在布局中能够解决什么问题?

  • 浮动布局
  • 各种机型屏幕适配
  • 水平和垂直居中
  • 自动分配宽度
  • ... ...

2.2 在CSS中,常规的布局是基于块和内联流方向,而Flex布局是基于flex-flow流,稀土很好解释了Flex布局的思想:

  容器默认存在两根轴: 水平的主轴(main axis) 和 垂直的主轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end; 交叉轴的开始位置叫做cross start, 结束位置叫做cross end.

  项目默认沿主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size.

2.3 根据伸缩项目排列方式的不同,主轴和测轴方向也有所变化:

3. FlexBox的常用属性

3.1 容器属性

  • flexDirection:

    row | row-reverse | column | column-reverse

    • 该属性决定主轴的方向(即项目的排列方向).
    • row : 主轴为水平方向,起点在左端
    • row-reverse : 主轴为垂直方向,起点在右端.
    • column(默认值) : 主轴为垂直方向,起点在上沿.
    • column-reverse : 主轴为垂直方向,起点在下沿.

  • justifyContent: flex-start | flex-end | center | space-between | space-around

    • 定义了伸缩项目在主轴线的对齐方式
    • flex-start(默认值): 伸缩项目向一行的起始位置靠齐.
    • flex-end: 伸缩项目向一行的结束位置靠齐.
    • center: 伸缩项目向一行的中间位置靠齐.
    • space-between: 两端对齐,项目之间的间隔都相等.
    • space-around: 伸缩项目会平均的分布在行里,两端保留一半的空间.

  • alignItems: flex-start | flex-end | center | baseline | stretch

    • 定义项目在交叉轴上如何对齐, 可以把其想象成侧轴(垂直于主轴)的"对齐方式"
    • flex-start: 交叉轴的起点对齐
    • flex-end: 交叉轴的终点对齐
    • center: 交叉轴的重点对齐
    • baseline: 项目的第一行文字的基线对齐
    • stretch(默认值): 如果项目未设置高度或设为auto,将占满整个容器的高度

  • flexWrap: nowrap | wrap | wrap-reverse

    • 默认情况下,项目都排在一条线(又称"轴线")上. flex-wrap属性定义,如果一条轴线排不下,如何换行.

    • nowrap(默认值): 不换行

    • wrap: 换行, 第一行在上方.

    • wrap-reverse: 换行,第一行在下方. (和wrap相反)

3.2 元素属性

  • flex

    • "flex-grow", "flex-shrink" 和 "flex-basis"三个属性的缩写, 其中第二个和第三个参数("flex-shrink" 和 "flex-basis")是可选参数.
    • 默认值为"0 1 auto".
    • 宽度 = 弹性宽度 * ( flexGrow / sum( flexGorw ) )

  • alignSelf: "auto | flex-start | flex-end | center | baseline | stretch"

    • align-self属性允许单个项目有与其他项目不一样的对齐方式, 可覆盖align-item属性. 默认值为auto, 表示继承父元素的align-items属性,如果没有父元素, 则等同于stretch.

4. 在React Native中使用Flexbox

4.1 获取当前屏幕的宽度,高度,分辨率

var Dimensions = require('Dimensions');

export default class myApp extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.innerView1}></View>
<View style={styles.innerView2}></View>
<View style={styles.innerView3}></View>
<Text>屏幕宽度是{Dimensions.get('window').width}</Text>
<Text>屏幕高度是{Dimensions.get('window').height}</Text>
<Text>屏幕分辨率是{Dimensions.get('window').scale}</Text>
</View>
);
}
}

感谢作者,原文地址,戳我

React Native - FlexBox弹性盒模型的更多相关文章

  1. flexbox弹性盒模型

    div { display:flex; } div a{ }

  2. 【css】弹性盒模型

    弹性盒模型flexBox 弹性盒模型是c3的一种新的布局模式 它是指一种当页面需要适应不同屏幕大小以及设备类型时,确保元素有恰当行为的布局方式. 引入弹性盒模型布局的目的是提供一种更有效的方法来对一个 ...

  3. (转)详解css3弹性盒模型(Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  4. flexbox-CSS3弹性盒模型flexbox完整版教程

    原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开 ...

  5. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  6. CSS3弹性盒模型flexbox完整版教程

    http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...

  7. css3弹性盒模型(Flexbox)

    Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当 ...

  8. 详解css3弹性盒模型(Flexbox)

    目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex ...

  9. Flexbox(弹性盒模型)完全指南

    Flexbox(弹性盒模型)布局完全指南 Github:sueRimn 来源:A guide to Flexbox 这个指南讲诉了flexbox的所有内容,重点介绍了父元素(flex容器)和子元素(f ...

随机推荐

  1. 洛谷.2590.[ZJOI2008]树的统计(树分块)

    题目链接 Update:这种分块写法...可以被卡掉啊... 好像没有靠谱的树分块写法... /* 对树上节点进行分块,每个点记录dep,fa,val,Max,Sum,Max,Sum表示当前点在该块内 ...

  2. curl解压gzip页面gzcompress内容

    $headers = array( //"Content-type:application/json;charset='utf-8'", "Cache-Control:n ...

  3. 我的 Sublime Text 2 笔记

    作为aptana死忠粉的我,最近由于工作需要最近开始使用sublime,初次使用,就被其秒开的启动速度,简洁的界面设计,无干扰的信息提示所这幅. 俗话说,工欲善其事必先利其器,作为码农,在开始编码之前 ...

  4. json数据格式 net.sf.json.JSONException: A JSONObject text must begin with '{' at character 1 of Error:(findColumns1)Read timed out

    substring(3)的用法http://www.w3school.com.cn/jsref/jsref_substring.asp 可能一:sb是要转化的数据,以sb是String为例       ...

  5. JUnit accuracy/failure/stress test区别

    accuracy test(结果准确性测试) 例如,Assert.assertEquals(expected, actual). 如果结果不符合期望则产生failure.说明程序逻辑有问题. fail ...

  6. Codeforces Round #408 (Div. 2) 题解【ABCDE】

    A - Buying A House 题意:给你n个房间,妹子住在第m个房间,你有k块钱,你想买一个离妹子最近的房间.其中相邻的房间之间距离为10,a[i]=0表示已经被别人买了. 题解:扫一遍更新答 ...

  7. 用vue的自定义组件写了一个拖拽 组件,局部的 只能在自定义元素内的

    简单实现 没有做兼容<!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. Linux的SSH免密登录认证过程研究

    一.先看下SSH免密登录使用到的工具和生成的文件 工具:ssh-keygen用于生成秘钥文件,其中秘钥分为公钥和私钥.ssh-copy-id用于复制公钥文件到被控制机. 文件:ssh-keygen生成 ...

  9. WinPython

    WinPython   http://winpython.github.io/

  10. eclim CSearch macro 问题的解决过程备忘录

    问题: CSearch 宏时. RuntimeException: Could not find file with URI because it is a relative path, and no ...