React Native学习之React Flexbox布局

Joe.Ye • 2023-02-25 • React Native

基本介绍

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

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

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

伸缩容器的属性

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

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

display

display:flex | inline-flex 

display:块级伸缩容器 | 行内级伸缩容器

flex-direction

指定主轴的方向

flex-direction:row(默认值) | row-reverse | column | column-reverse
flex-direction:横向 | 横向反转 | 纵向 | 纵向反转

flex-wrap

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

flex-wrap:nowrap(默认值) | wrap | wrap-reverse
flex-wrap:不换行 | 换行 | 换行并反转

flex-flow

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

flex-flow:row nowrap

justify-content

定义伸缩项目在主轴线的对齐方式

justify-content:flex-start(默认值) | flex-end | center | space-between | space-around
justify-content:起始位置对齐 | 结束位置对齐 | 居中对齐 | 空隙间隔 | 空隙包裹

align-items

定义伸缩项目在交叉轴上的对齐方式

align-items:flex-start(默认值) | flex-end | center | baseline | stretch
align-items:起始位置对齐 | 结束位置对齐 | 居中对齐 | 基线对齐 | 拉伸(前提是不能设置交叉轴长度)

align-content

调整伸缩项目出现换行后在交叉轴上的对齐方式，前提是预先设置：flex-wrap:wrap | wrap-reverse

align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值)
align-content:起始位置对齐 | 结束位置对齐 | 居中对齐 | 空隙间隔 | 空隙包裹 | 拉伸（前提是不能设置交叉轴长度）

伸缩项目的属性

order

定义项目的排列顺序，数值越小，排列越靠前，默认值为0。

order:整数值

flex-grow

定义伸缩项目的放大比例，默认值为0，即表示如果存在剩余空间，也不放大。若大于0，则放大并充满容器，放大程度与各项目flex-grow成比例。

flex-grow:整数值

flex-shrink

定义伸缩项目的收缩能力，默认值为1。收缩的前提是所有项目已经充满容器导致空间不足并且不换行的情况，收缩程度与各项目flex-shrink成比例。

flex-shrink:整数值

flex-basis

设置伸缩项目的基准值，剩余的空间按比率进行伸缩。

flex-basis:length | auto(默认值)

flex

是flex-grow flex-shrink flex-basis这三个属性的缩写。

flex:none | flex-grow flex-shrink flex-basis（其中第二个和第三个参数为可选参数，默认值为：0 1 auto）

align-self

设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式。

align-self:auto | flex-start | flex-end | center | baseline | stretch（默认值，伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的话，只有在不设置高度的情况下才能看到效果）

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>React 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:row;
  flex-wrap:wrap;

  flex-flow:row wrap;
  align-content:flex-start

  /*垂直居中*/    
  /*老版本语法*/
  -webkit-box-align: center; 
  -moz-box-align: center;
  /*混合版本语法*/
  -ms-flex-align: center; 
  /*新版本语法*/
  -webkit-align-items: center;
  align-items: center;

  /*水平居中*/
  /*老版本语法*/
  -webkit-box-pack: center; 
  -moz-box-pack: center; 
  /*混合版本语法*/
  -ms-flex-pack: center; 
  /*新版本语法*/
  -webkit-justify-content: center;
  justify-content: center;

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

#box1{
    background:red;
    height:100px;
    width:80px;
}
#box2{
    background:yellow;
    width:80px;
    align-self:stretch;
}
#box3{
    background:green;
    height:100px;
    width:80px;
    align-self:stretch;
    order:-1;
}
</style>

</head>

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

版权声明：
作者：Joe.Ye
链接：https://www.appblog.cn/index.php/2023/02/25/react-native-learning-react-flexbox-layout/
来源：APP全栈技术分享
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
海报
React Native学习之React Flexbox布局
基本介绍 Flexbox是Flexible Box的缩写，弹性盒子布局。主流的浏览器都支持 Flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是……
<<上一篇
下一篇>>
文章目录
关闭
目 录