React Native系列之flexbox布局(RN基础)

flexbox是Flexible Box的缩写，弹性盒子布局主流的浏览器都支持

flexbox布局是伸缩容器(container)和伸缩项目(item)组成

Flexbox布局的主体思想是元素可以改变大小以适应可用空间，
当可用空间变大，Flex元素将伸展大小以填充可用空间，
当Flex元素超出可用空间时将自动缩小。
总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。

按照伸缩流的方向布局
伸缩容器有主轴和交叉轴组成！主轴既可以是水平轴，也可以是垂直轴

flexbox目前还处于草稿状态，所有在使用flexbox布局的时候，
需要加上各个浏览器的私有前缀，即-webkit -moz -ms -o等

###伸缩容器的属性

1.display

display:flex | inline-flex 注：标记是否为伸缩容器

块级伸缩容器行内级伸缩容器

2.flex-direction 注：类似安卓开发中线性布局的布局方向

指定主轴的方向 flex-direction:row（默认值）| row-reverse
| column | column-reverse
row:按主轴方向从左到右
React Native系列之flexbox布局(RN基础)

row-reverse：从右到左

column：从上到下

React Native系列之flexbox布局(RN基础)

column-reverse：和column的方向相反
3.flex-wrap

伸缩容器在主轴线方向空间不足的情况下，是否换行以及该如何换行

flex-wrap:nowrap（默认值，不换行） | wrap | wrap-reverse
nowrap：不换行
wrap：换行
wrap-reverse:换行但是和wrap的顺序相反，例如本来是1,2，3的，变成3,2，1

4.flex-flow

是flex-direction和flex-wrap的缩写版本，它同时定义了伸缩容器的主轴和侧轴
，其默认值为 row nowrap

5.justify-content

用来定义伸缩项目在主轴线的对齐方式，语法为：
justify-content:flex-start（默认值） | flex-end | center |
space-between | space-around 这两个类似等比例布局
flex-start:主轴开始方向对齐
flex-end：主轴结束位置对齐
center ：主轴居中对齐
space-between：主轴中间分等分对齐
space-around：主轴分等分对齐

6.align-items
用来定义伸缩项目在交叉轴上的对齐方式，语法为：
align-items:flex-start（默认值） | flex-end | center | baseline | stretch
align-items和justify-content类似，只是轴的方向不同

7.align-content 类似安卓的

用来调整伸缩项目出现换行后在交叉轴上的对齐方式，语法为：
align-content:flex-start | flex-end | center | space-between
| space-around | stretch（默认值）

这类似align-items,只是前提条件是要出现换行

代码：

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>第二个flexbox例子</title>

  <style type="text/css">
html {
  height: 100%;
} 

body {
  display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
 display: -moz-box;    /* 老版本语法: Firefox (buggy) */ 
 display: -ms-flexbox;  /* 混合版本语法: IE 10 */
 display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
 
 display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */
 /* flex-direction*/
 flex-direction: row;





  margin: 0;
  height: 100%;
  width: 100% /* needed for Firefox */
 
 
} 

#box1{
    background: red;
    height:100px;
    width: 100px;

}
#box2{
    background: yellow;
    height:100px;
    width: 100px;



}
#box3{
    background: green;
     height:100px;
    width: 100px;


}


  </style>


</head>


<body>


  <div id="box1">第一个</div>
  <div id="box2">第二个</div>
  <div id="box3">第三个</div>


</body>
</html>

秒客网

React Native系列之flexbox布局(RN基础)

相关文章