微信小程序day02：布局

最新推荐文章于 2024-03-14 21:18:31 发布
最新推荐文章于 2024-03-14 21:18:31 发布
阅读量229 收藏 2
点赞数
文章标签： 微信游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kkkghjk/article/details/119859108
版权

目录

微信小程序基本布局

布局wxml

display:block（一个item是一行）

使用display:flex（在一行里）

flex-direction:row(在行里顺序排列 )

flex-direction:row-reverse（在行里反转排列）

flex-direction:column（在列上顺序排列）、flex-direction:column-reverse（在列上反转排列）

justify-content:flex-start（主轴起点对齐）

justify-content:flex-end结束点对齐

justify-content:center居中对齐

justify-content:space-between两端对齐

justify-content:space-around每个子元素之间距离相当

align-items:center;子侧轴对齐方式

布局wxss

微信小程序基本布局

布局wxml

display:block（一个item是一行）

 

<!--pages/third/third.wxml-->
​
<view class="container">
​
<!-- 伸缩容器 -->
​
<text>使用display默认值display:block</text>
​
  <view class="flex-row" style="display:block">
​
•     <view class="flex-item">1</view>
​
•     <view class="flex-item">2</view>
​
•     <view class="flex-item">3</view>
​
  </view>

使用display:flex（在一行里）

 

  <text>使用display:flex</text>
​
  <!-- block和flex区别：子元素view换行显示block 还是行内显示flex -->
​
  <view class="flex-row" style="display:flex">
​
•     <view class="flex-item">1</view>
​
•     <view class="flex-item">2</view>
​
•     <view class="flex-item">3</view>
​
  </view>

flex-direction:row(在行里顺序排列 )

 

  <!-- 排列方向---行-->
​
  <!-- 顺序 -->
​
  <text>flex-direction:row</text>
​
  <view class="flex-row" style="display:flex; flex-direction: row;">
​
•     <view class="flex-item">1</view>
​
•     <view class="flex-item">2</view>
​
•     <view class="flex-item">3</view>
​
  </view>

flex-direction:row-reverse（在行里反转排列）

 

<!-- 反转 -->
​
  <text>flex-direction:row-reverse</text>
​
  <view class="flex-row" style="display:flex; flex-direction: row-reverse;">
​
•     <view class="flex-item">1</view>
​
•     <view class="flex-item">2</view>
​
•     <view class="flex-item">3</view>
​
  </view>

flex-direction:column（在列上顺序排列）、flex-direction:column-reverse（在列上反转排列）

 

 

    <!-- 排列方向---列-->
​
  <!-- 顺序 -->
​
  <text>flex-direction:column</text>
​
  <view class="flex-row" style="display:flex; flex-direction: column;">
​
•     <view class="flex-item">1</view>
​
•     <view class="flex-item">2</view>
​
•     <view class="flex-item">3</view>
​
  </view>
​
<!-- 反转 -->
​
  <text>flex-direction:column-reverse</text>
​
  <view class="flex-row" style="display:flex; flex-direction: column-reverse;">
​
•     <view class="flex-item">1</view>
​
•     <view class="flex-item">2</view>
​
•     <view class="flex-item">3</view>
​
  </view>
​

justify-content:flex-start（主轴起点对齐）

​
<!--主轴起点对齐 -->
​
  <text>justify-content:flex-start主轴起点对齐（默认值）</text>
​
  <view class="flex-row" style="display:flex;justify-content:flex-start;">
​
•     <view class="flex-item" style="width: 160rpx;">1</view>
​
•     <view class="flex-item" style="width: 100rpx;">2</view>
​
•     <view class="flex-item" style="width: 160rpx;margin-right: 0rpx;">3</view>
​
  </view>

 

justify-content:flex-end结束点对齐

 

<!-- flex-end结束点对齐  -->
​
  <text>justify-content:flex-end结束点对齐</text>
​
  <view class="flex-row" style="display:flex;justify-content:flex-end;">
​
•     <view class="flex-item" style="width: 160rpx;">1</view>
​
•     <view class="flex-item" style="width: 100rpx;">2</view>
​
•     <view class="flex-item" style="width: 160rpx;margin-right: 0rpx;">3</view>
​
  </view>

justify-content:center居中对齐

 

  <!-- center居中对齐 -->
​
  <text>justify-content:center居中对齐</text>
​
  <view class="flex-row" style="display:flex;justify-content:center;">
​
•     <view class="flex-item" style="width: 160rpx;">1</view>
​
•     <view class="flex-item" style="width: 100rpx;">2</view>
​
•     <view class="flex-item" style="width: 160rpx;margin-right: 0rpx;">3</view>
​
  </view>

justify-content:space-between两端对齐

 

  <!-- space-between两端对齐 -->
​
  <text>justify-content:space-between两端对齐</text>
​
  <view class="flex-row" style="display:flex;justify-content:space-between;">
​
•     <view class="flex-item" style="width: 160rpx;">1</view>
​
•     <view class="flex-item" style="width: 100rpx;">2</view>
​
•     <view class="flex-item" style="width: 160rpx;margin-right: 0rpx;">3</view>
​
  </view>
​

justify-content:space-around每个子元素之间距离相当

 

  <!-- space-around每个子元素之间距离相当 -->
​
  <text>justify-content:space-around每个子元素之间距离相当</text>
​
  <view class="flex-row" style="display:flex;justify-content:space-around;">
​
•     <view class="flex-item" style="width: 160rpx;">1</view>
​
•     <view class="flex-item" style="width: 100rpx;">2</view>
​
•     <view class="flex-item" style="width: 160rpx;margin-right: 0rpx;">3</view>
​
  </view>

align-items:center;子侧轴对齐方式

 

可以用来把图片和文字对齐

​
​
<!-- align-items:center;子侧轴对齐方式 -->
​
<text>align-items:center;子侧轴对齐方式</text>
​
  <view class="flex-row" style="display:flex;align-items: center;">
​
•     <view class="flex-item" style="width: 160rpx;">1</view>
​
•     <view class="flex-item" style="width: 100rpx;">2</view>
​
•     <view class="flex-item" style="width: 160rpx;margin-right: 0rpx;">3</view>
​
  </view>
​
</view>

布局wxss

/* pages/third/third.wxss */
​
text{
​
  font: size 30rpx;
​
  line-height: 60rpx;
​
​
}
​
.flex-row{
​
/* 宽度 */
​
  width: 100%;
​
  background-color: pink;
​
}
​
​
.flex-item{
​
  width: 100%;
​
  background-color: salmon;
​
/* 外边距 */
​
  margin-bottom: 20rpx;
​
  margin-right: 20rpx;
​
​
​
}

安必信kkkghjk
关注
微信小程序元素/文字在横向和纵向实现居中对齐、两端对齐、左右对齐、上下对齐
tl437002770的博客
01-25 3703
微信小程序元素/文字在横向和纵向实现居中对齐、两端对齐、左右对齐、上下对齐
微信小程序day1
weixin_46631844的博客
09-21 517
微信小程序的详细介绍学习
微信小程序布局理解——flex、block、inline
weixin_45770902的博客
05-12 1541
独占⼀⾏：view、swiper 不独占⼀⾏：text display:inline; 内联元素，简单来说就是在同⼀⾏显⽰。他没有⾼度，给内联元素设置width和height是没效果的 display:block; 块级元素，简单来说就是就是有换⾏，会换到第⼆⾏。同时可以设置宽⾼。 inline-block 的元素既具有 block 元素可以设置宽⾼的特性，同时⼜具有 inline 元素默认不换⾏的特性。⽐如 inline-block 元素也可以 flex布局 flex-direction: ro
微信小程序实现文本两端对齐
热门推荐
star950117的博客
09-14 2万+
在小程序开发中经常会用到文本的两端，比如登录的用户名、密码、验证码等需要让这些文字左右对齐，下面介绍常用的对齐方式： 1.使用下面这样，经过测试在开发工具中有效，但是在手机端测试无效，兼容性不好。 .text{ text-align: justify; text-align-last:justify; } 2.使用下面这种，兼容性比较好，手机端还有开发工具中都可以实现。 .te...
小程序中实现动态处理表格，文本两端对齐
03-29
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
微信小程序-block标签的使用及if标签
csvbdd的博客
04-30 662
微信小程序-外卖小程序Demo源码
05-14
1. **页面结构**：微信小程序采用WXML（Weixin Markup Language）和WXSS（Weixin Style Sheets）进行视图层布局。WXML类似于HTML，负责结构；WXSS类似于CSS，负责样式。这两个语言都是微信专门为小程序设计的，它们...
学子影城项目DAY04（微信小程序）
07-18
【学子影城项目DAY04（微信小程序）】是一个关于微信小程序开发的实践教程，主要聚焦于实现“城市信息”这一功能模块。在微信小程序中，开发者可以利用其丰富的API和组件来创建交互性强、用户体验良好的轻量级应用。...
微信小程序笔记2：极点日历插件
qwe4455778的博客
02-24 581
效果图：关于这个日历我不太会使用只能在找到前辈的文章的基础之上进行学习，而且这个日历也没有开发者文档，不方便进行一下步学习，所以我打算改用另一个插件。
微信小程序(续)
javashareauthor的博客
08-17 396
以下介绍是微信小程序开发的过程经常使用的一些标签和功能，已附上代码和说明。 1、微信小程序之页面导航 用法1：wx.navigateTo();如： handleClick(){  wx.navigateTo({    Url:’/pages/list/list’ }) } 上述的方法是保留当前的页面，也就是说页面可以返回。 现象： 用法2：wx.redirectTo ({...
微信小程序block的使用教程
08-27
主要介绍了微信小程序block的使用 ,微信小程序最近非常火热，实现起来也很简单，只要block就可以实现，需要的朋友可以参考下
微信小程序开发 — Flex布局
金戈鐡馬
03-13 2989
微信小程序页面布局方式采用的是Flex布局。 Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 Flex布局提供了元素在容器中的对齐，方向以及顺序，甚至他们可以是动态的或者不确定的大小的。 Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。
微信小程序首页-----布局（详细教程赶快收藏吧）
2301_76988707的博客
10-17 7726
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。网址：Flex 布局语法教程https://www.runoob.com/w3cnote
微信小程序——flex布局
wct040923的博客
03-21 4728
在一款校园类软件新引进日课表功能，其中的单个盒子就可使用flex布局具体的盒子分布方式可如上划分（其中建筑的方格可最后考虑，因为此图片位于文字的下方，需要用其他定位方式来进行定位，层级调低一个即可）首先需要确定最外层的大格子为父容器，给予flex布局的标志（display:flex）。在框里面的方格时要找准下一个较低的父容器的盒子的划分（在较低的父容器其中也要加入display:flex）。
flex布局（微信小程序版）
LeiCheerup的博客
10-07 695
容器和子元素：Flex 布局包括一个容器和容器内的子元素。容器成为 Flex 容器（Flex container），子元素成为 Flex 项（Flex item）将容器的 display 属性设置为 flex或 inline-flex 可以创建一个 Flex 容器主轴和交叉轴：Flex 容器默认水平方向上为主轴（main axis），垂直方向上为交叉轴（cross axis）
微信小程序中使用flex布局的justify-content属性实现几种水平分布
今天也要加油呀！
04-10 4582
三个子元素在父元素的排列方式。justify-content为子元素在父元素水平方向的排列方式 <view class='dad'> <view class='son'>自定义</view> <view class='son'>自定义</view> <view class='son'>自定义</view&...
【前端知识点总结】CSS 基础七
jiang_ziY的博客
02-16 4254
「这是我参与2022首次更文挑战的第15天」 本章内容包含： 1、弹性布局， 2、主轴， 3、侧轴， 4、变轴， 5、盒子垂直水平居中的五种方法， 6、CSS3 抗锯齿形， 7、清除输入框高亮
微信小程序第三章总结
最新发布
2301_76558412的博客
03-14 1975
盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS 中，一个独立的盒子模型由内 width 内容(content)、内边距(padding)、边框(border)所示。和外边距(margin)4个部分组成。
微信小程序样式Flex Box精通课程-Flex容器的属性-justify-content内容对齐(左中右)
杭州.黄老师
01-14 1万+
justify-content内容对齐 基础语法 justify-content属性定义了项目在主轴上的对齐方式。（左中右） .box { justify-content: flex-start | flex-end | center | space-between | space-around; }  flex-start（默认值）：左对齐  flex-end：右对齐  cen...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值