微信小程序CSS Flexbox(弹性盒子)布局模块
容器中使用flexbox
flexbox的模型
当元素表现为 flex 框时,它们沿着两个轴来布局:
名词说明
- 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main start 和 main end。
- 交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
- 设置了 display: flex 的父元素被称之为 flex 容器(flex container)。
- 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)
实例
<div class="flex-container"><div>1</div><div>2</div><div>3</div>
</div>
含有三个项目的flex容器,其实就是一个普通的容器标签,在样式表中通过将他的display属性值设置为flex,就可以作为伸缩容器用了。
.flex-container {display: flex;
}
flex容器的属性
flex-direction
定义容器在哪个方向上来排列子项目
可选值 | 含义 | 示例 |
---|---|---|
column | 垂直方向上排列,从上到下 | |
column-reverse | 也是垂直方向上,不过是从下到上的 | |
row | 水平方向上排列,从左到右 | |
row-reverse | 水平方向上排列,从右到左 |
flex-wrap
规定是否对flex的子项目进行换行操作,当子项目水平排列的时候,一行的项目过多是否对其进行换行的操作。
可选值 | 含义 | 示例 |
---|---|---|
wrap | 在必要的时候换行 | |
nowrap | 不进行换行,此值为默认值 | |
wrap-reverse | 必要的时候换行,不过要以相反的顺序换行,相当于从下到上换行 |
flex-flow
这个参数是对flex-wrap和flex-direction的组合参数,通过这一个属性可以设置两个属性的值
.flex-container {display: flex;flex-flow: row wrap;
}
通过设置flex-flow把flex-direction设置为row(水平布局),flex-wrap设置为wrap(必要时换行)。
justify-content
控制flex子项目在主轴上的位置。
可选值 | 含义 | 示例 |
---|---|---|
center | 将flex的子项目向主轴上中心位置对齐 | |
flex-start | 将子项目向主轴开始位置对齐,即main start位置,本例中最左侧 | |
flex-end | 将子项目向主轴结束位置对齐,即main end位置,本例中最右侧 | |
space-around | 主轴方向上,在每个子项目的前后都加上空格 | |
space-between | 主轴方向上在两个子项目之间加上空格(头尾没有空格) |
align-items
控制flex子项目在交叉轴上的位置。
可选值 | 含义 | 示例 |
---|---|---|
center | 子项目向交叉轴中心位置对齐 | |
flex-start | 子项目向交叉轴起始位置对齐,即cross start位置,本例中最上方 | |
flex-end | 子项目向交叉轴结束位置对齐,即cross end位置,本例中最下方 | |
stretch | 交叉轴方向拉伸子项目填充容器,此值为默认值 | |
baseline | 子项目与基线(容器中心水平线)对齐 |
align-self
与align-item相同也是定义了交叉轴方向上的对齐方式,可选值也是相同的,但是这个属性用于子项目自身,它会覆盖掉父容器的align-item属性值。下面的例子中设置父容器的align-item=flex-start,单独设置子项目“2”align-self属性为center,效果图如下:
align-content
定义了子项目的填充方式,即flex容器内部子项目从哪个位置开始填充。该属性对单行弹性盒子模型无效。(即:带有 flex-wrap: nowrap)。
可选值 | 含义 | 示例 |
---|---|---|
center | 所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离 | |
flex-start | 所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行 | |
flex-end | 所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐 | |
space-between | 所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐 | |
stretch | 拉伸所有行来填满剩余空间,剩余空间平均地分配给每一行,此值为默认值 |
子项目居中
justify-content(主轴方向) 和 align-items(交叉轴方向) 属性设置为center(居中),就可以实现子项目的居中。在微信小程序中我只设置了justify-content就实现了居中,不知道是什么情况。
.flex-container {display: flex;height: 300px;justify-content: center;align-items: center;
}
微信小程序CSS Flexbox(弹性盒子)布局模块相关推荐
- 微信小程序 css边框阴影,微信小程序|CSS的内边距和圆框
本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述 在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高. 光有浮 ...
- 微信小程序css 华文琥珀_琥珀项目:较小的,面向生产力的Java语言功能
微信小程序css 华文琥珀 Brian Goetz最近的消息欢迎来到琥珀! 介绍Project Amber ( OpenJDK的一部分, 最初于1月提出 ). Goetz通过介绍"欢迎使用A ...
- 通过调试微信小程序示例代码解析flex布局参数功能(一)
通过调试微信小程序示例代码解析flex布局参数功能 官方示例小程序源代码下载地址:https://github.com/wechat-miniprogram/miniprogram-demo 通过调试 ...
- 微信小程序打开红包的css_微信小程序 css使用技巧总结
微信小程序 css使用技巧 1:用纯CSS创建一个三角形的原理把上.左.右三条边隐藏掉(颜色设为 transparent) .demo { width: 0; height: 0; border-wi ...
- 微信小程序 php毛玻璃,微信小程序 CSS filter(滤镜)的使用示例详解
之前在看七月老师的视频的时候,看到了有一个样式是 -webkit-filter ,不知道是什么(我没咋学过CSS,嘿嘿,所以不知道是啥),于是查了一下,原来是滤镜吖.但是在微信小程序里使用的时候,下面 ...
- 微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁 微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
- 微信小程序css卡片样式(带阴影效果)
微信小程序css卡片样式(带阴影) 效果图 wxml代码 <view class="card"></view> css样式 .card{width: 90% ...
- 微信小程序开发实现宫格布局
微信小程序开发实现宫格布局 问题背景 客户端和小程序等日常开发和学习过程中,宫格布局是一种很场景的场景,可以清晰的展现分类等效果.本文将介绍微信小程序开发中如何实现宫格布局效果. 问题分析 先上效果图 ...
- 微信小程序网悦新闻开发--视频模块开发(四)
目录 微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
最新文章
- Redis初学:7(Set类型)
- 微服务 Rpc和Rest协议
- 用Python解“二分法求多项式单根 ”题
- tensorflow实现图像的翻转
- 普林斯顿微积分读本:第 25 章 如何求解估算问题
- log4j.xml配置文件
- 独家|一文带你理解机器学习中的“归纳偏好”真正含义!
- Python导出MySQL数据库中表的建表语句到文件
- 利用excel做简单的曲线拟合并生成公式
- 倒计时小插件,懒人专用
- Unity官方文档(英文)
- 国外5G行业应用产业政策分析及对我国的启示
- Unity 重要概念
- 服务器可不可以选择ssd硬盘
- 计算机怎么知道乘法优先,计算器算个明白.doc
- 嵌入式产品如何支持阿拉伯文显示---看这一篇就够了
- 使用手机或电脑远程连接windows自带的远程桌面
- ERROR in xxx.js from UglifyJs
- 安防监控显示服务器内部错误,监控摄像常见故障和处理方法
- 删除苹果自带软件后果_苹果自带的音乐软件有多香?3个月试用期后我删了其它APP...
热门文章
- 浏览器缓存机制(吴秦(Tyler) )
- Python编曲实践(五):通过编写爬虫来爬取海量MIDI文件,预备构建数据集(附有百度云下载链接)
- UA OPTI544 量子光学3 光与介质相互作用的量子方法简介
- iebook第一门户直达服务让您生意快人一步
- 排查处理Failed to find latest MicroserviceVersionMeta, appId=chw-apaas, microserviceName=fileservice
- 衡水东方计算机学校是技校吗,河北衡水技校有哪些 衡水哪个技术学校好
- 基础——IOT(物联网)的七大通信协议
- 一些知识点,点击波纹,Toolbar和侧滑视图结合等
- 银屑病药物争相涌现,将惠及国内600万以上银屑病患者
- 在Linux下查看FC HBA卡的速率和状态