微信小程序-flex布局中align-items和align-self区别
首先看看菜鸟教程中关于align-items和align-self的定义
align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。(对齐弹性盒的各项元素)
align-self:align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。(对齐弹性对象元素内的某个项)
从定义上可以看出是对齐”目标“上存在差异,这样看上去似乎不太便于理解
/*index.wxml*/
<view class="container"> <view class="item" style='order:/4'>
1
</view> <view class="item">
2
</view> <view class="item i3">
3
</view> <view class="item">
4
</view> </view>
/*index.wxss*/
.container{
height: 100px;
width: 100%;
background-color: green;
display: flex;
/* flex-direction: column; */
flex-direction: row;
flex-flow: wrap; justify-content:space-between;
align-items: flex-start;
}
.item{
width: 100rpx;
height: 100rpx;
background-color: yellow;
border: 1px solid white; order:;
}
.i3{
display: flex;
align-items: flex-end;
/* flex-grow: 1; */
order:;
}
这里用align-items显示的结果如图,可以看到此时文字是在下方,而色块并没到下方
如果将代码align-items换为align-self,整个块都以从下往上的方式排列了,而数字的位置仍然是在左上角
微信小程序-flex布局中align-items和align-self区别的更多相关文章
- 微信小程序~Flex布局
有一点需要注意的是,你的小程序要求兼容到iOS8以下版本,需要开启样式自动补全.开启样式自动补全,在“设置”—“项目设置”—勾选“上传代码时样式自动补全”.
- 微信小程序—Flex布局
参考教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html https://xluos.github.io/demo/flexb ...
- 微信小程序flex布局
一.flex布局基础 二.相对定位和绝对定位 flex的容器和元素 主轴(左-右),交叉轴(上-下) flex容器属性详解 flex-direction 决定元素的排列方向(默认row ...
- 微信小程序 | flex布局属性
flex-direction 主轴方向 row: 横向 row-reverse: 横向倒序 column: 纵向 column-reverse: 纵向倒序; flex-wrap 元素排列换行 nowr ...
- 微信小程序的布局css样式
微信小程序的布局css样式width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-w ...
- uniapp 小程序 flex布局 v-for 4栏展示
注:本项目的图片资源来源于后端接口,所以使用的是v-for. 关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: fl ...
- 关于微信小程序<radio-group>布局排列
微信小程序更新以后今天<radio>全部变成垂直排列了,布局乱了. 一开始尝试给外层<view>添加display:flex;flex-direction:row:未果. 后来 ...
- 微信小程序自学过程中遇到的问题 转
view标签下hover必须为true时,设置hover-class才有效,hover-start-time和hover-stay-time的形式如下: < view class=" ...
- 微信小程序在开发中遇到的问题与解决方法
1. √ 这种错误多半是该js文件中没有Page这个方法,就算是空的js也必须要把Page({ })写上去 2. √ 这种错误多半是该json文件没有内容,所以必须要加上{ },就算是空内容也要加 ...
随机推荐
- poj 2528(线段树+离散化) 市长的海报
http://poj.org/problem?id=2528 题目大意是市长竞选要贴海报,给出墙的长度和依次张贴的海报的长度区间(参考题目给的图),问最后你能看见的海报有几张 就是有的先贴的海报可能会 ...
- Centos7 开机启动命令行模式
1.在图形界面下单击鼠标右键,选择“Konsole”: 2. 获取当前系统启动模式,输入:systemctl get-default 3.查看配置文件, cat /etc/inittab 4.通过以上 ...
- Python generator 的yield (enumerate)
生成杨辉三角 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 def triangles(max): L = [1,] while len(L) - 1 < ...
- Laravel 5.5 + Vue 开发单页应用
上次我用 laravel5.3 + Vue 开发了一个简单的单页应用,这次我打算将其升级到 laravel5.5,在升级的过程中,做一下记录,其源码放在 github 上面,源码地址 开发环境 软 ...
- 论坛:一对一关联映射/单向关联/两个类间,可以有两个(多个)关联关系/content为大文本类型/
>>单向:只写一端的映射属性,另一端不写(有一端用不着);双向:两端都写映射属性 >>一对一关联有两类:一类基于主键的(一般不使用),一类基于外键的(重点学习): 外键:是一个 ...
- .core 学习文档
https://docs.microsoft.com/zh-cn/aspnet/core/razor-pages/?view=aspnetcore-2.1&tabs=visual-studio
- SparkStreaming updateStateByKey 保存记录信息
)(_+_) ) 查看是否存在,如果存在直接获取 )) ssc.checkpoint() )) //使用updateStateByKey 来更新状态 val stateDstream = wordDs ...
- 解决IDEA、Pycharm连接数据库乱码的问题
一.IDEA. 使用IDEA连接数据库: import java.sql.Connection;import java.sql.DriverManager;import java.sql.Result ...
- ubuntu新建、删除用户
新建用户名为newuser的用户,并赋予sudo权限 adduser newuser --ingroup sudo 删除用户以及用户目录 deluser -r newuser
- python学习之ansible api
Python API 2.0 从2.0的事情开始更复杂一些,但是你会得到更多离散和可读的类: #!/usr/bin/env python import json from collections im ...