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

淩亂°似流年 2021-10-29 17:46 415阅读 0赞

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

> [http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]

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

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

*  先声明这个是什么布局， 直接在对于的父view里面用， 下面的代码

display: flex;

*  对于第一个`flex-direction`，父view`里面`的元素排列方式，就是flex布局（这里注意是里面的view才生效，如果作用范围不是这个，那就没有效果了），其值有三个，第一个是默认。其他看单词意思就知道了。依次是 `横向，横向从右往左、垂直、垂直从下到上`。

row | row-reverse | column | column-reverse;

*  `flex-wrap` 这个意思，对于元素太多，而且指定每个view的宽度，view 宽度大于最大宽度是否换行，依次的意思`不换号、换行、换行且颠倒`

nowrap | wrap | wrap-reverse

*  `justify-content`这个是对其方式，依次是`左对齐、右对齐、居中、两端对齐，项目之间的间隔都相等、每个项目两侧的间隔相等`

justify-content: flex-start | flex-end | center | space-between | space-around;

*  `align-items`属性定义项目在交叉轴上如何对齐。

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

.box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }

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

[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

发表评论取消回复

表情：

评论列表（有 0 条评论，415人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序——flex布局

在一款校园类软件新引进日课表功能，其中的单个盒子就可使用flex布局具体的盒子分布方式可如上划分（其中建筑的方格可最后考虑，因为此图片位于文字的下方，需要用其他定位方式来...

爱被打了一巴掌/ 2024年04月24日 14:42/ 0 赞/ 84 阅读

相关微信小程序-Flex 布局是什么

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.c

左手的ㄟ右手/ 2024年02月19日 15:37/ 0 赞/ 48 阅读

相关 9.微信小程序（Flex布局-容器属性）

微信小程序（Flex布局-容器属性）大纲（1）场景（2）容器与项目元素（3）主轴与交叉轴（4）容器属性盒模型分类盒模型分类：IE盒

深藏阁楼爱情的钟/ 2023年06月15日 11:26/ 0 赞/ 2 阅读

相关微信小程序scroll-view

<scroll-view scroll-y style="height: 100%;"> <view class="green" style="width:

分手后的思念是犯贱/ 2023年03月13日 03:29/ 0 赞/ 26 阅读

相关微信小程序（九）布局

1、display:block 指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:bloc

曾经终败给现在/ 2022年12月27日 01:58/ 0 赞/ 148 阅读

相关微信小程序开发:Flex布局

转载自：微信小程序页面布局方式采用的是`Flex`布局。 `Flex`布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 Fl

亦凉/ 2022年07月12日 14:28/ 0 赞/ 269 阅读

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

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

淩亂°似流年/ 2021年10月29日 17:46/ 0 赞/ 416 阅读

相关微信小程序之view布局

.wxml ![Image 1][] .wxss ![Image 1][] 几个不同效果是view的属性不同产生的 ![Image 1][] ![Ima

怼烎@/ 2021年09月18日 03:02/ 0 赞/ 500 阅读

相关微信小程序-利用flex布局实现一个简单的页面

预展 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fx

小鱼儿/ 2021年08月13日 12:10/ 0 赞/ 313 阅读

相关微信小程序页面布局

一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 2.Flex布局提

野性酷女/ 2021年06月11日 15:11/ 0 赞/ 795 阅读