css基础之flex布局

css基础之flex布局

图片[1]-css基础之flex布局-学吧号

很多时候跟着书和不系统的视频学习,会发现没有方向,学了很多却不知道自己能够做出什么成绩。 学习要有一个清晰的职业学习规划,学习过程中会遇到很多问题,你可以到我们的web学习交流君羊- 点击此处 , 同时准备了基础,进阶学习资料。

学友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时讲一些项目实战案例。

———————————————— 1.什么是flex flex 是 Flexible Box 的缩写,意为 弹性布局 flex布局中把一个元素作为容器,容器中的子元素称为项目 可以通过容器的flex属性,设置所有项目的排列样式。也可以通过项目的flex属性,设置指定项目的排列样式。 2.flex布局的方向 flex布局项目的排列方向可以有两个维度,一水平,二垂直 项目排列方向称为主轴,与主轴垂直的方向叫交叉轴 在每个轴上有两个方向,从左至右,从右到左;从上到下,从下到上。 2.1 flex水平布局 在水平维度,默认方向是从左至右 可以通过 flex-direction:row-reverse设置为从右到左排列 效果图: 1).默认方向,从左至右2).反方向2.2 垂直布局 效果图: 1).默认方向,从上到下2).反方向3. 容器内项目换行 通过flex-wrap属性,设置项目在容器内是否可以换行,默认不允许换行。

如何在安卓手机微信小程序里实现Flex布局

图片[2]-css基础之flex布局-学吧号

最初打算使用scroll-view实现,效果好、流畅、有惯性滑动,但由于滚动条没法去掉、无法实现上下层的帧布局,最终放弃了。 还是自己写个吧,利用手势事件。

遗憾的是小程序中目前没有像Android中快速滑动事件,所以,要实现惯性滑动是不可能了。

item的布局: 推荐小程序优先使用flex布局,完全够用。这也是微信推荐的。 <view wx:for=”{{cardTeams}}” wx:for-item=”cardTeam” id=”{{cardTeam/images/20150928/tooopen_sy_143912755726.jpg” mode=”scaleToFill”></image> <view class=”number-wrapper”> <text class=”name”>{{cardTeam.name}}</text> <view class=”count-wrapper”> <view class=”decrease-btn”>-</view> <text class=”count”>1</text> <view class=”increase-btn”>+</view> </view> <view class=”price-wrapper”> <text class=”unit”>¥</text> <text class=”price”>99.80</text> </view> </view> <view class=”ok”><view class=”inner-ok”>确定</view></view> <view class=”remove” data-id=”{{cardTeam.id}}” bindtap=”delItem”><view>删除</view></view> </view> 主要是将删除按钮的设为绝对定位(position: absolute): .item .remove{ width: 60px; height: 100%; background-color: red; position: absolute; top: 0; right: -60px; display: flex; justify-content: center; align-items: center; } Page({ data: { cardTeams:[{“id”:”aaaaa”, “name”:”android教程”, “url”:””, “right”:0, “startRight”:0},{“id”:”bbbb”, “name”:”小程序教程”, “url”:””, “right”:0, “startRight”:0}] }, drawStart : function(e){ // console.log(“drawStart”); var touch = e.touches[0]; startX = touch.clientX; startY = touch.clientY; var cardTeams = this.data.cardTeams; for(var i in cardTeams){ var data = cardTeams[i]; data.startRight = data.right; } key = true; }, drawEnd : function(e){ console.log(“drawEnd”); var cardTeams = this.data.cardTeams; for(var i in cardTeams){ var data = cardTeams[i]; if(data.right <= 100/2){ data.right = 0; }else{ data.right = maxRight; } } this.setData({ cardTeams:cardTeams }); }, drawMove : function(e){ //console.log(“drawMove”); var self = this; var dataId = e.currentTarget.id; var cardTeams = this.data.cardTeams; if(key){ var touch = e.touches[0]; endX = touch.clientX; endY = touch.clientY; console.log(“startX=”+startX+” endX=”+endX ); if(endX – startX == 0) return ; var res = cardTeams; //从右往左 if((endX – startX) < 0){ for(var k in res){ var data = res[k]; if(res[k].id == dataId){ var startRight = res[k].startRight; var change = startX – endX; startRight += change; if(startRight > maxRight) startRight = maxRight; res[k].right = startRight; } } }else{//从左往右 for(var k in res){ var data = res[k]; if(res[k].id == dataId){ var startRight = res[k].startRight; var change = endX – startX; startRight -= change; if(startRight < 0) startRight = 0; res[k].right = startRight ; } } } self.setData({ cardTeams:cardTeams }); } }, //删除item delItem: function(e){ var dataId = e.target.dataset.id; console.log(“删除”+dataId); var cardTeams = this.data.cardTeams; var newCardTeams = []; for(var i in cardTeams){ var item = cardTeams[i]; if(item.id != dataId){ newCardTeams.push(item); } } this.setData({ cardTeams:newCardTeams }); }, onLoad: function () { console.log(‘onLoad:’+app.globalData.domain) } }) drawStart用于记录手指触碰时的位置,drawMove记录手指滑动的位置,两者的差值就是删除按钮的偏移量 drawEnd手指抬起时触发,用于设置弹回、摊开效果。目前我的是超过一半自动弹开,不足一半自动收回。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

CSS布局 + Flex布局

图片[3]-css基础之flex布局-学吧号

我们只会用到一点点儿CSS布局的属性,虽然少,但既然要用到,就得把它们总结在这里,搞明白。 在了解CSS布局的相关属性之前,我们先了解一下 盒子模型——CSS会把每个组件都看作是一个盒子,每个盒子从内往外有三个部分: 组件的宽度和高度决定了它在屏幕上显示的尺寸,一个组件的宽度和高度就是它 外边框所包围矩形 的宽度和高度,iOS里也是这样的。

我们可以通过 width 和 height 属性给一个组件设置固定的宽度,不过需要注意 这两个属性只能接收数值,不能带单位,这是因为RN要自己去适配安卓和iOS的单位。

在RN里,我们想让一个组件自适应宽高,要分两步。 首先我们要让该组件撑满它的父视图,即如果我们想自适应宽度,就得先让子视图的宽度撑满它父视图的宽度,如果我们想自适应高度,就得先让子视图撑满它父视图的高度,如果我们宽度和高度都想自适应,就得先让子视图把它父视图的宽度和高度都撑满。然后才能像我们iOS里使用Masonry那样,通过给组件添加上边距、左边距、下边距、右边距等约束来实现宽度和高度的自适应。 这里再对第一步做个解释, item的 flex: 1 属性可以让item在主轴上撑满它的容器,容器的 alignItems: ‘stretch’ 属性 + item在侧轴上不设置空间可以让item在侧轴上撑满它的容器。

好像有点不明白是吧,我们再通过一个例子来说得明了点,RN里不是默认主轴为竖向、侧轴为横向嘛,我们就采取这个默认状态来举例子。 在RN里,默认主轴为竖向、侧轴为横向的状态下,如果我们想让某个组件自适应高度,就得首先在它自身上设置 flex: 1 属性,来让它的高度撑满它的父视图;如果我们想让某个组件自适应宽度,就得首先在它父视图身上设置 alignItems: ‘stretch’ 属性(当然默认就是这个值),这还不够,你还得确保不给这个组件设置 width 属性或者 width 属性的值设为 auto ;如果我们想让一个组件自适应宽高,则两者都得做。 当然,如果我们设置了主轴为横向、侧轴为竖向,其实也是一样的道理,自己捋一下就知道怎么做了。

如果还是看不懂的话,没有关系,下面我们会详细谈到这几个属性,等你学了这几个属性,反过头来看这里就明白了。 Flex是Flexible Box的缩写,可译为灵活的、有弹性的盒子。那Flex布局就是Flexible Box布局的缩写,就译为弹性盒子布局,用来对一个盒子进行灵活的布局。

在了解Flex布局之前,我们得先了解一下Flex布局里的两对儿 重要的 概念。 采用Flex布局的组件,被称为Flex容器(flex container),简称容器(container)。 这个组件上的子组件,被称为Flex项目(flex item),简称item(项目)。

我们可以把容器和item看做是父视图和子视图的关系, 因此下文中的容器、父组件、父视图将是一样的概念,item、组件、子视图将是一样的概念,组件和视图将是一样的概念。 每个容器都有两根轴,一个是 主轴, 一个是 侧轴 。 容器里众多的 item自动沿主轴进行排列。 一个item在主轴方向上所占据的空间称为 main size ,一个item在侧轴方向上所占据的空间称为 cross size 。

RN里主轴的默认方向为竖向,侧轴为横向。 浏览器里主轴的默认方向为横向,侧轴为竖向,下面我们讲Flex布局的属性时会采用浏览器的状态,学会后对应到RN里,换个主轴方向就可以了。 用在容器上的属性,最常用的有 5个 , 而且这些属性还都不是从来设置容器自己的布局,而是用来设置容器里item的布局。 flex-direction 属性用来设置主轴的方向,即容器里item自动排列的方向。

在浏览器里,主轴的方向默认为横向,所以 flex-direction 属性的默认值为 row 。 它有4种取值。 justify-content 属性用来设置item在主轴上的对齐方式。 它有5种取值。

align-items 属性用来设置item在侧轴上的对齐方式。 它有5种取值。 默认情况下,一个容器只有一条主轴,所有的item都会沿着这条主轴自动排列下去,但是如果item太多了,一个屏幕长度的主轴根本串儿不下这么多item,那后面的item就会溢出屏幕,而界面还不是 ScrollView ,不能滚动,怎么办呢? flex-wrap 属性用来设置换行,即当容器主轴上显示不下那么多的item时,我们可以让item换行来显示,并且一旦设置了换行,那么这个容器就不再是一条主轴了,而是会有多条平行的主轴。

它有3种取值。 align-content 属性用来设置多条主轴的对齐方式, 如果项目只有一根轴线,该属性不起作用, 即 align-content 属性要基于 flex-wrap 属性设置了换行才有使用的意义。 它有6种取值。

用在item上的属性,最常用的有 2个 , 这些属性都是用来设置item自己的布局。 在第1小节容器的属性,我们已经通过 align-items 属性统一设置了容器里item在侧轴上的对齐方式,但如果其中某个item不想遵循这个对齐方式怎么办呢?我们会常见到这种场景,10个里有8个item是一样的对齐方式,就有1、2个item特立独行,那我们就得用item自己的 align-self 属性来单独给它们设置对齐方式了。 align-self 属性用来设置单个item在侧轴上的对齐方式, 注意是给特立独行的单个item设置哦,而且是侧轴,它会覆盖它容器的 align-items 属性,当然如果不设置这个属性,默认值就为 auto ,即item会默认使用容器的 align-items 属性给它设置的对齐方式。 它有6种取值,除了 auto ,其他都与 align-items 属性完全一致。

怎么说呢,item的 align-self 属性似乎是用来造反的,反抗它容器的 align-items 属性。 flex 属性接收一个整数值, flex 属性描述起来太麻烦了,可以自行去搜索加深理解,我这里只列举出它的用途及注意事项。 (1) flex 属性有三个用途 (2)使用 flex 属性需注意 iOS里怎么使用Masonry布局的,RN里就怎么使用 Flex布局+CSS布局 来做布局就行了,它们布局的思路是一样的, 一个组件也同样至少需要四个约束。

当然,它们之间有一个极其细小的差别,那就是:上面提到的“RN里组件自适应宽高分两步”,而iOS里Masonry才不管你什么撑满不撑满呢。 当然,它们之间有一个极其巨大的差别,那就是:iOS里是没有主轴和侧轴之分的,你可以在一个父视图上横向、竖向同时放控件,并同时完成横向和竖向的布局。但RN里有主轴和侧轴之分,我们添加的组件只会沿着主轴排列,不可能同时出现横向和竖向排列,并且布局的时候也只能是沿着主轴布局,不可能同时完成两个方向的布局。 下面我们就通过几个小练习,来对比一下Masonry布局和Flex布局+CSS布局的思路,加深对RN里怎么布局组件的理解。

flex 怎么设置 自动换行的布局

图片[4]-css基础之flex布局-学吧号

flex-align:默认是设置垂直方向的对齐方式,值: start、end、center、stretch、baseline。flex-pack:设置子元素之间如何分配多余空间,值:start、end、center、justify。

flex-direction:设置子元素的排列方式, row、row-reverse、column、column-reverse。

flex-wrap:设置子元素的是否自动换行和排列方向,值:nowrap、wrap和wrap-reverse。-ms-flex:设置子元素弹性,参数,分别是正弹性、负弹性和默认大小。

THE END
喜欢就支持一下吧
点赞5
温馨提示:

1、本内容转载于网络,版权归原作者所有!
2、本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
3、本内容若侵犯到你的版权利益,请联系我QQ:243371741,会尽快给予删除处理!