学习旧岛小程序 (1) flex 布局
2023-09-11 14:22:19 时间
css :
view 相当于 div 块级元素
display 默认设置 block
display:inline 设置后 设置宽度高度是无效的
要设置宽度高度 又要设置为行内元素 我们设置:
(1)display:inline-block;
width:100px;
height:100px;
(2) flex 布局
display:flex
flex-direction:row;
flex-direction 设置布局方向 默认设置 row
row-reverse : 主轴为 水平方向 起点在右边
column-reverse:主轴为垂直方向, 起点在下边
row(默认值): 主轴为水平方向,起点在左端。
column: 主轴为垂直方向,起点在上沿。
reverse 意思是 倒序
(3) 为什么行倒序 于 列倒序有点不同
因为他们的高度是他们的本身的高度加起来的 宽度撑满屏幕
所以在列倒序上只是调整了下位置 行倒序就会向右倒序
原来排序是 1 2 3 反过来就是 3 2 1
(4)justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
flex-start 左边对齐
flex-end 右边对齐
center 中心
space-between 两端对齐,项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
start 与 end 的方向 取决于主轴上的对齐方法 是哪个
space-between 让靠左边的元素靠左对齐 让右边的元素靠右对齐 其他的保持等距
space-between 也就是平均分布
space-around 等距分布 每个元素的左右距离都相等
(5) align-items属性
align-items属性定义项目在交叉轴上如何对齐。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
交叉轴的方向取决于主轴的方向
比如: 主轴 row 交叉轴 column 就比如一个十字路口
stretch 没有设置高度的情况下
(6) flex-wrap属性 换行
nowrap(默认):不换行。
wrap:换行,第一行在上方
wrap:换行,第一行在上方。
换行: 有间距
相关文章
- Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)
- struts2学习笔记(三)—— 在用户注冊程序中使用验证框架
- 一个菜鸟程序猿--再谈六月坚持英语学习
- 【XCP学习】测量/校准协议XCP入门-1
- 【XCP学习】XCP的趋势和应用实例-3
- 机器学习笔记之受限玻尔兹曼机(五)基于含隐变量能量模型的对数似然梯度
- 学业指导工作室热忱为同学们的学习服务
- 大数据与机器学习:实践方法与行业案例3.4 自动加载程序的多线程实现
- 学习会员上线啦,快来看看会有哪些权益吧~
- 《易学Python》——第1章 为何学习Python 1.1 学习编程
- python学习之把列表元素拼接成字符串的4种方法
- 高效学习方法
- 算法是背后的故事,优秀程序到底需不需要学习
- 大数据学习——spark-steaming学习
- Java学习-049-正则工具类
- Selenium2学习-008-WebUI自动化实战实例-006-易迅登录之 frame 处理
- Duilib学习之基础(一个SDK程序)
- 微信小程序常用学习(一)内置组件
- vue学习:打开/刷新一个页面时,触发一个后端请求
- 微信小程序学习第5天——页面导航(声明式与编程式导航)与页面事件(上拉与下拉刷新)
- Linux学习笔记(整理记录)
- 【Java学习笔记】成功解决:‘javac‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- 学习旧岛小程序 (4)封装api 请求
- 学习旧岛小程序 (3)组件的样式
- python量化交易学习笔记(三)——第一个策略回测程序Demo6