加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-15 04:42:10 所属栏目：百科 来源：网络整理
导读：为什么要学习CSS布局属性 首先，React Native使用JSX语法（后边的博客会详细讲解）来编程，它其实是一个语法糖，React Native 的代码格式和原来的HTML + CSS 的代码格式有些相似，重要的是，它布局的属性和CSS的布局属性基本是差不多的,所以，我们从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>

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

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


伸缩布局图-图1

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

伸缩容器属性

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

下边简要介绍这几个属性

1、display

该属性用来指定元素是否为伸缩容器，语法：
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

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

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

该属性主要来指定伸缩容器的主轴线方向空间不足的情况下，是否换行以及该如何换行，语法：
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

该属性是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

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

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

该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式，其语法为：
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

这个属性主要用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目的主轴上使用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的效果图

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同