微信小程序|样式布局篇

1、小程序中的布局
- 1.1 Flex布局特点
- 1.2 Flex布局的应用
- - 关于利用justify-contenr属性的居中出现的问题
  - - 1-创建titles数组，有多个tab标签。并使用wx:for="{{titles}}"遍历输出。
    - 2-设置整体为flex布局，并设置高度88rpx。
- 1.3 Flex和block

1、小程序中的布局

小程序的flex布局，即弹性盒子布局，可以比较容易的排列组件位置。

1.1 Flex布局特点

(1)任意方向的伸缩，向左，向右，向下，向上；

(2)在样式层可以调换和重排顺序；

(3)主轴和侧轴方便配置；

(4)子元素的空间拉伸和填充；

(5)沿着容器对齐。

1.2 Flex布局的应用

（1）主体元素的布局，最大的container的布局设置内部块状元素的横向排列和纵向排列。

.container{display: flex; // flex的用法/* flex-direction: column; */ 纵向排列/* flex-direction: row; */ 横向排列/* flex-direction: row-reverse; */ 横向颠倒排列 也就是反转过来flex-direction: column-reverse; 纵向颠倒排列 也是反转过来
}

（2）view组件
view组件的是自适应的，通常情况下，宽度是100%，高度就是你指定容器的高度，高度是自适应的，随着你的指定的容器的大小而变化。

（3）justify-content属性
主要是来控制主轴子元素的对齐方式的。

justify-content: flex-end;// 向下对齐
justify-content: flex-start; // 向上对齐
justify-content: center;//居中对齐
justify-content: space-between;// 头尾靠边 然后中间元素等距排列 相当于平均分布
justify-content: space-around;// 等距分布 头尾不靠边 子元素两边的元素距离是相等的

关于利用justify-contenr属性的居中出现的问题

需求： 让三个view在tab-controller的flex容器中居中，并且点击某个view字体显示红色，下面有红线标识。

1-创建titles数组，有多个tab标签。并使用wx:for="{{titles}}"遍历输出。

<view class='tab-controller'><block wx:for="{{titles}}" wx:key="*this"><view bind:tap="handleItemClick" data-index="{{index}}" class='tab-item {{currentIndex == index ? "active" : ""}}'><text>{{item}}</text></view></block>
</view>

2-设置整体为flex布局，并设置高度88rpx。

方法一、给每个遍历输出的<view class="tab-item”>一个样式，并设置flex:1;text-align:center保持居中。

.tab-item {flex: 1;text-align: center;
}.active {color: red;
}// 1、 padding文字距周围左右20rpx，上下16rpx
//（padding描述的布局内的内容）
// 2、 border-bottom有下边线
.active text {padding: 20rpx 16rpx;border-bottom: 6rpx solid red;
}

方法二、使用flex的justify-content: space-between;

.tab-controller {/* color: red; */display: flex;height: 88rpx;/* 垂直方向居中 */line-height: 88rpx;  /* justify-content: space-around; *//* background-color: orange; */
}

问题：方法二的文本会被挤到偏上的位置。
原因： 这是因为flex:1把三个文本平均分配的空间，而justify-content三个文本共用一个空间，当一个文本被点击改变大小其他的也会被改变。

（4）flex中的主轴和交叉轴
这个可以从一个例子中来理解，就是子元素既在水平方向居中又在垂直方向居中的情况。

align-items: center; // 交叉轴方向
justify-content: center; // 主轴方向

（5）flex中的换行
在flex布局中，flex的处理是自动会适应屏幕的宽度。来缩小你子元素的宽度，如何能子元素保持设定的大小，就需要换行了，在flex中，自动换行的元素是flex-wrap。

flex-wrap:wrap;// 自动换行
flex-wrap:nowrap;// 默认不换行

1.3 Flex和block

设有display:flex或者display:block的元素就是一个flex container(伸缩容器)，里面的子元素称为flex item(伸缩项目)，flex container中子元素都是使用Flex布局排版。

display:block 指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:block。
display:flex:指定为行内容器模式，在一行内显示子元素，可以使用flex-wrap属性指定其是否换行，flex-wrap有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)
使用display:block(默认值)的代码:

<view class="flex-row" style="display: block;"><view class="flex-view-item">1</view><view class="flex-view-item">2</view><view class="flex-view-item">3</view></view>

改换成display:flex的显示效果:

可以从效果图看到block和flex的区别，子元素view是在换行显示(block)还是行内显示(flex)。

参考：https://www.cnblogs.com/dragondean/p/5922740.html

微信小程序|样式布局篇相关推荐

[个人向]超快速了解微信小程序:看这篇就够了!(注册、语言、框架、配额等简要说明)
[个人向]超快速了解微信小程序看这篇就够了+相关简要说明本文精炼微信小程序开发文档相关内容,旨在对初次接触并准备开发小程序的童鞋(比如自己)提供一个快速了解攻略.其中包括注册相关.语言.框架模式.相 ...
HTML微信小程序的页眉代码,微信小程序样式wxss各种问题总结（不断更新）
1)加入其它样式文件 @import '/css/dialog.wxss'; //注意:必须结尾用分号 2)隐藏滚动条 ::-webkit-scrollbar { width:; height:; c ...
修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
小程序长按api_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
小程序测试用例模板_微信小程序样式：高质量小程序样式模板大全
新手想要制作出美观的小程序,你需要多参考一些好看的微信小程序样式.今天就带大家分析几个高质量小程序的样式,看看别是怎么把小程序做得美观又吸引人的: 1.电商小程序样式电商小程序首页一般是按照&quo ...
7.微信小程序（布局适配与物理逻辑像素）
微信小程序(布局适配与物理逻辑像素) 前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP. ...
微信小程序教程入门篇
微信小程序教程入门篇: 微信小程序怎么做?做一个微信小程序要多少钱呢? 作为Z时代,Y时代的我们,做一个微信小程序难道还要去看书学代码吗? 不存在的各位. 现在制作一个微信小程序,只需要动动鼠标键盘, ...
【微信小程序开发学习篇】
微信小程序开发学习篇概述相关信息笔记制作时间:2022-9-25 参考视频:黑马视频参考文档:微信小程序官方开发文档文章目录微信小程序开发学习篇概述相关信息小程序基础 1.数据绑定与 ...
微信小程序之拓展篇——weui-wxss
微信小程序之入门篇(一) 微信小程序之注册篇(二) 微信小程序之开发初体验(三)--开发工具使用和目录结构微信小程序之生命周期(四) 微信小程序之数据绑定(五) 微信小程序之触控事件(六) 微信小程 ...
微信小程序样式入门到精通(wxss)课程007-文本-text-align水平对齐
text-align水平对齐语法 text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式. 西方语言都是从左向右读,所有 text-align 的默认值是 left.文 ...

微信小程序|样式布局篇

微信小程序|样式布局篇

1、小程序中的布局

1.1 Flex布局特点

1.2 Flex布局的应用

关于利用justify-contenr属性的居中出现的问题

1-创建titles数组，有多个tab标签。并使用wx:for="{{titles}}"遍历输出。

2-设置整体为flex布局，并设置高度88rpx。

1.3 Flex和block

微信小程序|样式布局篇相关推荐

最新文章

热门文章

微信小程序|样式布局篇

微信小程序|样式布局篇

1、 小程序中的布局

1.1 Flex布局特点

1.2 Flex布局的应用

关于利用justify-contenr属性的居中出现的问题

1-创建titles数组，有多个tab标签。并使用wx:for="{{titles}}"遍历输出。

2-设置整体为flex布局，并设置高度88rpx。

1.3 Flex和block

微信小程序|样式布局篇相关推荐

最新文章

热门文章

1、小程序中的布局