React Native－1.CSS布局属性之伸缩容器属性

React 前端之家
前端之家收集整理的这篇文章主要介绍了React Native－1.CSS布局属性之伸缩容器属性，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

为什么要学习CSS布局属性

首先，React Native使用JSX语法（后边的博客会详细讲解）来编程，它其实是一个语法糖，React Native 的代码格式和原来的HTML + CSS 的代码格式有些相似，重要的是，它布局的属性和CSS的布局属性基本是差不多的,所以，我们从CSS的布局属性过渡到React Native 的布局属性，会更加平滑好理解，毕竟它的岁数大很多。。。

常用的CSS布局属性

“alignItems”,
“alignSelf”,
“backfaceVisibility”,
“backgroundColor”,
“borderBottomColor”,
“borderBottomLeftRadius”,
“borderBottomRightRadius”,
“borderBottomWidth”,
“borderColor”,
“borderLeftColor”,
“borderLeftWidth”,
“borderRadius”,
“borderRightColor”,
“borderRightWidth”,
“borderStyle”,
“borderTopColor”,
“borderTopLeftRadius”,
“borderTopRightRadius”,
“borderTopWidth”,
“borderWidth”,
“bottom”,
“color”,
“flex”,
“flexDirection”,
“flexWrap”,
“fontFamily”,
“fontSize”,
“fontStyle”,
“fontWeight”,
“height”,
“justifyContent”,
“left”,
“letterSpacing”,
“lineHeight”,
“margin”,
“marginBottom”,
“marginHorizontal”,
“marginLeft”,
“marginRight”,
“marginTop”,
“marginVertical”,
“opacity”,
“overflow”,
“padding”,
“paddingBottom”,
“paddingHorizontal”,
“paddingLeft”,
“paddingRight”,
“paddingTop”,
“paddingVertical”,
“position”,
“resizeMode”,
“right”,
“shadowColor”,
“shadowOffset”,
“shadowOpacity”,
“shadowRadius”,
“textAlign”,
“textDecorationColor”,
“textDecorationLine”,
“textDecorationStyle”,
“tintColor”,
“top”,
“transform”,
“transformMatrix”,
“width”,
“writingDirection”

代码效果展示需要一个.html文件，我们创建一个文本文件，后缀名改一下，把下边这段代码整个复制进去，我们在里边要搞出一些事情：(每次修改完代码，保存，双击文件，如果已经打开，刷新浏览器即可)

<DOUCTYPE!>
    <html>
<head>
<style> .flex-container{ background-color: #f00; width: 190; height: 190; display: flex; } .flex-container div { width: 50; height: 50; background-color: #00f; margin: 1 1 1 1; } .flex-container div h1{ width:50; height: 50; } .flex-item1 { } .flex-item2 { } .flex-item3 { } .flex-item4 { } .flex-item5 { } </style>
</head>
<body>
        <div class="flex-container">
            <div class="flex-item1">
                <h1 >1</h1>
            </div>
            <div class="flex-item2">
                <h1 >2</h1>
            </div>
            <div class="flex-item3">
                <h1 >3</h1>
            </div>
            <div class="flex-item4">
                <h1 >4</h1>
            </div>
            <div class="flex-item5">
                <h1 >5</h1>
            </div>
        </div>
</body>
    </html>

我们来讲解几个重要的属性

常用属性之－伸缩容器属性@H_404_371@


伸缩布局图-图1

默认情况下，伸缩容器由两根：主轴（main axis）和交叉轴（cross axis），可以理解成坐标系中的x轴和y轴，主轴开始和结束位置分别叫 main start 和 main end， 同理交叉轴开始和结束位置分别叫cross start 和cross end，二者可以互为交替（在代码中设置），无论哪条轴作为主轴，默认情况下，伸缩项目总是沿着主轴，flexBox目前还处于草稿状态，在使用的时候，需要加上各个浏览器的私有前缀，即－webkit 、－moz、－ms、－o等（这个大家可以自行百度一下，本篇主要讲布局属性），后边的代码为了方便都没有写前缀。

伸缩容器属性@H_404_371@

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

下边简要介绍这几个属性

@H_216_403@1、display@H_736_404@

该属性用来指定元素是否为伸缩容器，语法：
display:flex | inline-flex

属性意义：
flex :用于产生块级伸缩容器 CSS代码： 

.flex-container {
    display:flex;
}

inline-flex:用于产生行级伸缩容器 CSS代码： 

.flex-container {
    display:inline-flex;
}

注：这个时候columns在伸缩容器上没有效果，float、clear和vertical－align在伸缩项目上没有效果

2、flex-direction@H_736_404@

该属性指定主轴方向，语法：

flex-direction: row | row-reverse | column | column-reverse

属性意义：
row:(默认值),伸缩容器若为水平方向轴，伸缩项目的排版方式从左向右排列，CSS代码： 

.flex-container {
    display:flex;
    flex-direction:row;
}

效果如图2-1:

图2-1 flex-direction 为row的效果图

注：flex－direction默认为row，如果容器是横向伸缩，不用定义

row-reverse:伸缩容器若为水平方向，伸缩项目的排版方式为从右到左，CSS代码： 

.flex-container {
    display:flex;
    flex-direction:row-reverse;
}

效果如图2-2:

图2-2 flex-direction 为row-reverse时的效果图

column:伸缩容器若为垂直方向轴，伸缩项目的排版方式为从上向下排列，CSS代码： 

.flex-container {
    display:flex;
    flex-direction:column;
}


效果如图2-3:

图2-3 flex-direction 为column时的效果图

column-reverse:伸缩容器若为垂直方向轴，伸缩项目的排版方式为从下向上排列，CSS代码： 

.flex-container {
    display:flex;
    flex-direction:column-reverse;
}


效果如图2-4:

图2-4 flex-direction 为column-reverse时的效果图

3、flex-wrap@H_736_404@

该属性主要来指定伸缩容器的主轴线方向空间不足的情况下，是否换行以及该如何换行，语法：
flex-wrap: wrap | nowrap | wrap-reverse

下面简要介绍这三个属性值的含义：

wrap:伸缩容器空间不足的情况下允许换行。若主轴为水平轴，换行方向为从上到下。CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
}


效果如图2-5:

图2-5 flex-wrap 为wrap时的效果图

wrap-reverse:伸缩容器空间不足的情况下允许换行。若主轴为水平轴，换行方向为从下到上。CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-direction:row;
    flex-wrap:wrap-reverse;
}


效果如图2-6:

图2-6 flex-wrap 为wrap-reverse时的效果图

4、flex-flow@H_736_404@

该属性是flex-direction和flex-wrap属性的缩写版本，他同时定义了伸缩容器的主轴和侧轴，其默认值为row nowrap。语法
flex-flow:flex-direction flex-wrap
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row wrap-reverse;
}


效果如图2-7:

图2-7 flex-flow 为row wrap-reverse时的效果图

注图6和图7的效果是一样的，其他的形式大家可以自己改改属性测试一下

5、justify-content@H_736_404@

该属性来定义伸缩项目沿主轴线的对其方式，语法：

justify-content:flex-start | flex-end | center | space-between | space-around

下面简要介绍这个5个属性的含义
flex-start：伸缩项目向主轴线的起始位置靠齐。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row nowrap;
    justify-content:flex-start;
}


效果如图2-8:

图2-8 justify-content 为flex-start时的效果图

flex-end：伸缩项目向主轴线的结束位置靠齐。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row nowrap;
    justify-content:flex-end;
}


效果如图2-9:

图2-9 justily-content 为flex-end时的效果图

center：伸缩项目向主轴线的中间位置靠齐。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row nowrap;
    justify-content:center;
}


效果如图2-10:

图2-10 justily-content 为center时的效果图

space-between：伸缩项目会平均的分布在主轴线里。第一个伸缩项目在主轴线的开始位置，最后一个伸缩项目在主轴线的重点位置。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row nowrap;
    justify-content:space-between;
}


效果如图2-11:

图2-11 justily-content 为space-between时的效果图

注：这里在body中删除两个div，如果一行中的视图超出容器的范围，这个属性就看不出效果。

space-between：伸缩项目会平均的分布在主轴线里。两端保留一半的空间。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row nowrap;
    justify-content:space-around;
}


效果如图2-12:

图2-12 justily-content 为space-around时的效果图

注：这里在body中删除两个div，如果一行中的视图超出容器的范围，这个属性就看不出效果。

6、align-items@H_736_404@

该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式，其语法为：
align-items:flex-start | flex-end | center | baseline | stretch

下面简要介绍这5个属性值的含义。

flex-start（默认值）：伸缩项目向交叉轴的起始位置靠齐。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row nowrap;
    align-items:flex-start;
}


效果如图2-13:

图2-13 align-items 为flex-start时的效果图

flex-end：伸缩项目向交叉轴的结束位置靠齐。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row nowrap;
    align-items:flex-end;
}


效果如图2-14:

图2-14 align-items 为flex-end时的效果图

center：伸缩项目向交叉轴的中间位置靠齐。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row nowrap;
    align-items:center;
}


效果如图2-15:

图2-15 align-items 为center时的效果图

注：可以试一下flex-flow:row wrap并且5个视图的情况下的效果

baseline：伸缩项目根据它们的基线对齐。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row nowrap;
    align-items:baseline;
}
.flex-item1 {
    padding-top:15px;
}
.flex-item2 {
    padding-top:10px;
}
.flex-item3 {
    padding-top:5px;
}


效果如图2-16:

图2-16 align-items 为baseline时的效果图

stretch：伸缩项目根据它们的基线对齐。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row nowrap;
    align-items:stretch;
}

.flex-container div {
    width: 50;
    /*height: 50;*/
    background-color: #00f;
    margin: 1 1 1 1;
}


效果如图2-17:

图2-17 align-items 为stretch时的效果图

注：使用height时，在这个轴上的伸缩属性stretch就会失效，所以，我们需要把单个伸缩项目的固定高度控制代码注释掉，才能看到这个效果

7、align-content@H_736_404@

这个属性主要用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目的主轴上使用justify-content，语法：

align-content: flex-start | flex-end | center | space-between | space-around | stretch

注：flex-wrap：wrap一定要开启,且它在出现换行的情况下才能看到效果。下边提到的伸缩项目均指伸缩项目所在的行，因为这里调整的启示就是伸缩项目换行后每行之间的对其方式

下面主要介绍这6个属性值的含义：

flex-start：伸缩项目向交叉轴的起始位置靠齐。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row wrap;
    align-content:flex-start;
}


效果如图2-18:

图2-18 align-content 为flex-start时的效果图

flex-end：伸缩项目向交叉轴的结束位置靠齐。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row wrap;
    align-content:flex-end;
}


效果如图2-19:

图2-19 align-content 为flex-end时的效果图

space-between：伸缩项目向交叉轴中平均分布。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row wrap;
    align-content:space-between;
}


效果如图2-20:

图2-20 align-content 为space-between时的效果图

space-around：伸缩项目向交叉轴中平均分布，且在两边各有一班的空间。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row wrap;
    align-content:space-around;
}


效果如图2-21:

图2-21 align-content 为space-around时的效果图

stretch(默认值)：伸缩项目将会在交叉轴上伸展以占用剩余空间。
CSS代码： 

.flex-container{
    background-color: #f00;
    width: 190;
    height: 190;
    display: flex;
    flex-flow:row wrap;
    align-content:stretch;
}
.flex-container div {
    width: 50;
    /*height: 50;*/
    background-color: #00f;
    margin: 1 1 1 1;
}


效果如图2-22:

图2-22 align-content 为stretch的效果图

注：同justify-content:stretch一样，我们设置它交叉轴的拉伸方式的时候如果时这种自动填充的情况，伸缩项目的height属性不能被应用

center：伸缩项目将会向交叉轴的中间位置靠齐。
CSS代码： 

.flex-container{
background-color: #f00;
width: 190;
height: 190;
display: flex;
flex-flow:row wrap;
align-content:center;
}


效果如图2-23:

图2-23 align-content 为center的效果图

总结：伸缩容器的属性以上有一个单独的简单的介绍，复杂的应用应该是多个属性同时控制一个容器，需要大家自己练习，发挥自己的想象。下一篇我们学习，伸缩项目的属性。

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作