Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序-view元素Flex布局

微信小程序-view元素Flex布局

作者头像
叉叉敌
发布于 2019-08-23 09:53:26
发布于 2019-08-23 09:53:26
95500
代码可运行
举报
文章被收录于专栏:ChasaysChasays
运行总次数:0
代码可运行

对于网页布局,推荐 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。可以参考完全教材,我推荐一个阮老师的,下面是链接

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

对于 Flex 有几个属性,然后对常见的属性展开说明即可,怎么使用就完了。 对于这个布局的多动手,实在是一个非常不错的方法。

flex-direction flex-wrap flex-flow justify-content align-items align-content

  • 先声明这个是什么布局, 直接在对于的父view里面用, 下面的代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
display: flex;
  • 对于第一个flex-direction,父view里面的元素排列方式,就是flex布局(这里注意是里面的view才生效,如果作用范围不是这个,那就没有效果了),其值有三个,第一个是默认。其他看单词意思就知道了。依次是 横向,横向从右往左、垂直、垂直从下到上
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
row | row-reverse | column | column-reverse;
  • flex-wrap 这个意思,对于元素太多,而且指定每个view的宽度,view 宽度大于最大宽度是否换行,依次的意思不换号、换行、换行且颠倒
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
nowrap | wrap | wrap-reverse
  • justify-content这个是对其方式,依次是左对齐、右对齐、居中、两端对齐,项目之间的间隔都相等、每个项目两侧的间隔相等
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items属性定义项目在交叉轴上如何对齐。

这个我还没有用过,不过看介绍蛮花哨的。nice~

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

其他的参数对于小项目来说,用的较少,说了也不一定记得住,如果有用到的话,在实战种用起来。这个才是记得最牢固的!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年08月14日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
看完这篇,对flex布局还不熟悉,那就来找我(flex布局最全详解)
传统的页面布局,基于盒子模型margin + border + padding + content,依赖 display + position + float。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
javascript艺术
2021/05/28
19K0
看完这篇,对flex布局还不熟悉,那就来找我(flex布局最全详解)
48张小图带你领略Flex 布局之美
前言 最近在项目中,遇到布局问题,有时候,需要堆叠很多的样式,去排版,一定程度上增加了代码量,那么有没有更加方便的布局方式呢?? 48张图带你从0到1掌握flex布局方式。 flex布局在某种程度上,
前端劝退师
2020/09/21
1.6K0
48张小图带你领略Flex 布局之美
微信小程序flex布局
https://www.cnblogs.com/sun8134/p/6395947.html
似水的流年
2020/09/10
9130
弹性盒子(display: flex)布局超全讲解|Flex 布局教程
弹性布局(Flex布局)是一种现代的CSS布局方式,通过使用display: flex属性来创建一个弹性容器,并在其中使用灵活的盒子模型来进行元素的排列和定位。
肥晨
2023/06/27
26.3K1
CSS3中Flex布局(弹性布局)
Flex是Flexible Box的缩写,就是灵活的弹性页面布局。 作用是为盒子模型提供强大的灵活性功能;
Javanx
2019/09/04
7290
CSS3中Flex布局(弹性布局)
一文吃透 CSS Flex 布局
它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来,更简便、完整、响应式地实现各种页面布局。
唐志远
2023/08/01
7760
一文吃透 CSS Flex 布局
Flex 布局教程:语法篇
网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂
ruanyf
2018/04/13
9070
Flex 布局教程:语法篇
微信小程序布局
开始我们的入门后,接下来就可以开始创建我们的第一个demo页面了。按照官网的步骤,在pages模块下新建我们自己的模块demo,添加好对应的文件,然后在app.json文件里面配置好路由
用户2305175
2018/06/14
1.4K0
CSS Flex弹性布局详解! (常用的12个属性)
这期是我陆陆续续花了几个小时的时间为大家整理的Flex 弹性布局方法,主要讲了Flex布局的12个常见属性,以及文章最后的一个简单的小案例及其答案,希望对大家有帮助。
用户9999906
2022/09/26
23.7K0
flex给我实现一个对角线布局
flex在css布局中的是一个经常考察的知识点,虽然垂直居中问题已经问得快烂大街了,flex你虽然总是在用,但是总会有你不知道的盲点
Maic
2022/07/28
7970
flex给我实现一个对角线布局
使用flex弹性布局来为微信小程序写自适应页面
    我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖 display 属性 + position属性 + float属性,但是浮动布局有一些致命的小问题,比如垂直居中比较费劲,比如著名的float坍塌问题,另外有些极端情况下,还得使用模型+clear:both来手动清除浮动,比较麻烦。
用户9127725
2022/08/08
1.4K0
使用flex弹性布局来为微信小程序写自适应页面
Flex弹性布局
取值:row(默认) | row-reverse | column | column-reverse
ymktchic
2022/01/18
1.6K0
Flex弹性布局
微信小程序之 flex 布局最详细讲解 !!!
flex 是 flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何容器都可以指定为 flex 布局
Gorit
2021/12/08
17.8K2
微信小程序之 flex 布局最详细讲解 !!!
flex.css
.flex { display: -webkit-box; display: -webkit-flex; display: flex; }
余生
2018/10/15
7420
html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
※ flex-direction:column-reverse (与column 相反)
全栈程序员站长
2022/08/23
3.8K0
html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
Flex布局教程
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
訾博ZiBo
2025/01/06
2230
Flex布局教程
总结一下CSS3中的Flex布局语法
Flex 布局有时候会用到,但是始终分不清楚其中的部分属性及其含义,所以用这篇博客专门总结一下 Flex 布局。
知识分子没文化
2023/07/01
6480
总结一下CSS3中的Flex布局语法
学好Flex布局并不容易
CSS的传统布局解决方案,基于盒状模型,依赖display属性、position属性、float属性,对于一些特殊的布局,例如垂直居中,往往要想很多hack的方法来解决。
大江小浪
2020/11/26
7060
学好Flex布局并不容易
Day11:Flex布局
参考: 来源:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
达达前端
2019/07/04
4040
Day11:Flex布局
flex布局 原
Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。在处理垂直方向的对齐比较方便,现在越来越多的浏览器已经支持flex布局,最近出的轻应用也都是flex布局,对于前端来说,学习flex布局还是非常必要的。
tianyawhl
2019/04/04
7480
flex布局
                                                                            原
相关推荐
看完这篇,对flex布局还不熟悉,那就来找我(flex布局最全详解)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验