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

时间:2022-01-26 05:28:25
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>