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

分类：React作者：佚名

为什么要学习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的效果图

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 re...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据...
react 学习(六) 函数组件实例及类组件生命周期
本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们...
mini react-window(二) 实现可知变化高度虚拟列表
上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如...
react 学习(五) 完善 setState 及实现 ref
上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二...
react 学习13实现 PureComponent
我们知道 react 进行页面渲染或者刷新的时候，会从根节点到子节点全部执行一遍，即使子组件中没有状态的改变，也会执行。这就造成了性能不必要的浪费。之前我们了解...
react学习(十) React 中的 context
在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。
react 学习(一) 实现简版虚拟 dom 和挂载
楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试...
react 学习(三) 组件更新
我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
react学习(八) diff 算法实现
前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 -- diff 算法，了解如何优化和复用 dom 操作的，还有...
react学习(九) React 新的生命周期
我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安...
react 学习14实现 React.memo
上一小节我们学习了 react 中类组件的优化方式，对于 hooks 为主流的函数式编程，react 也提供了优化方式 memo 方法，本小节我们来了解下它的用...
细聊Concent & Recoil , 探索react数据流的新开发模式
开源不易，感谢你的支持，❤ star me if you like concent ^_^
使用hel-micro制作远程antd、tdesign-react
hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块方案 ，欢迎关注与了解
setup vs 5 react hooks,助你避开"沟"中陷阱
本文主题围绕concent的setup和react的五把钩子来展开，既然提到了setup就离不开composition api这个关键词，准确的说setup是由...
setState 同步 与异步
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot