从左往右 从上到下依次排序 flex css_「小程序JAVA实战」小程序的flex布局（22）...

最新推荐文章于 2023-03-13 14:56:14 发布
最新推荐文章于 2023-03-13 14:56:14 发布
阅读量556 收藏 1
点赞数
文章标签： 从左往右 从上到下依次排序 flex css

5f0e2a5a54edbadae915b8d736eaf470.png
之前已经把小程序的框架说完了，接下来说说小程序的组件，在说组件之前，先说说布局吧。源码：https://github.com/limingios/wxProgram.git 中的No.9

7c4c79cc01c0e277209d025cfc5189b3.png

小程序的flex布局

  • 小程序建议使用flex布局进行排版
    >其实div+css的方式也可以，只是官方建议使用flex布局的方式
  • flex 就是一个盒装弹性布局
  • flex是一个容器，所有的子元素都是它的成员。
整个是一个大盒子，大盒子里面有很多的小块a，b，c，d，e，f都是他的成员，针对其中的成员可以增加对应的样式，可以看出来a，b，d是比较大的，c是最小的，我们可以通过样式控制它们的大小，我们也可以通过order的方式控制他们的位置顺序，一般正常的咱们的页面都有顺序的，可以通过布局的order属性，把顺序给展示出来。
  • 定义布局display:flex
  • flex 容器的属性
    flex-direction：排列方向
    flex-wrap：换行规则
    justify-content：对齐方式

flex-direction

容器内的方向，方向可以从上到下，从左到右。
  • row[flex-direction 默认布局方式]从左到右
  • row-reverse从右到左
  • column从上到下
  • column-reverse从下到上
  • 演示
    flex-direction.wxml
<!--flex-direction.wxml-->
<view class="container-row">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:20rpx;'>
</view>

<view class="container-row-reverse">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:20rpx;'>
</view>

<view class="container-column">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>


<view style='width:100%;height:20rpx;'>
</view>

<view class="container-column-reverse">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

flex-direction.wxss

.container-row{
  display: flex;
  flex-direction: row;
}

.container-row-reverse{
  display: flex;
  flex-direction: row-reverse;
}

.container-column{
  display: flex;
  flex-direction: column;
}

.container-column-reverse{
  display: flex;
  flex-direction: column-reverse;
}

.size{
  width: 200rpx;
  height: 150rpx;
}
.a {
  background: red;
}
.b {
  background: yellow;
}

.c {
  background: blue;
}

.d {
  background: green;
}

.e {
  background: gold;
}

4b9102e5988edd6a027c539c11c20173.png

flex-wrap

容器换行的属性，分别是不换行，换行，逆向换行
  • nowrap[flex-nowwrap 默认不换行]不换行
  • wrap换行
  • wrap-reverse逆向换行
  • 演示
    container-wrap.wxml
<!--container-wrap.wxml-->
<view class="container-nowrap">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
</view>

<view class="container-wrap">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
</view>

<view class="container-wrap-reverse">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

flex-wrap.wxss

.container-nowrap{
  display: flex;
  flex-wrap: nowrap;
}
.container-wrap{
    display: flex;
  flex-wrap: wrap;
}

.container-wrap-reverse{
    display: flex;
  flex-wrap: wrap-reverse;
}


.size{
  width: 200rpx;
  height: 150rpx;
}
.a {
  background: red;
}
.b {
  background: yellow;
}

.c {
  background: blue;
}

.d {
  background: green;
}

.e {
  background: gold;
}

d16fdc6dba6f66e2ab1317d1da082004.png

flex-wrap

靠那个方向对齐的一个属性
  • flex-start[flex-start 默认左对齐]左对齐
  • flex-end向右对齐
  • center【使用最多的方式】居中对齐
  • space-around在成员元素周围包裹空格
  • space-between在成员元素之前留空白
  • 演示
    justify-content.wxml
<!justify-content.wxml-->
<view class="container-flex-start">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
</view>

<view class="container-flex-end">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
</view>

<view class="container-center">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
</view>

<view class="container-space-around">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
</view>

<view class="container-space-between">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

justify-content.wxss

.container-flex-start{
  display: flex;
  justify-content: flex-start;
}
.container-flex-end{
  display: flex;
  justify-content: flex-end;
}

.container-center{
  display: flex;
  justify-content: flex-center;
}

.container-space-around{
  display: flex;
  justify-content: space-around;
}


.container-space-between{
  display: flex;
  justify-content: space-between;
}

.size{
  width: 50rpx;
  height: 150rpx;
}
.a {
  background: red;
}
.b {
  background: yellow;
}

.c {
  background: blue;
}

.d {
  background: green;
}

.e {
  background: gold;
}

553c82d1327c59b8dd7da7db81c44d81.png

flex成员元素的样式设置

顺序和比例分配
  • order通过数字对flex容器内部的成员设置显示的顺序
  • flex设置每个成员所占行级的显示比例
  • 演示
    order-flex.wxml
<!--order-flex.wxml-->
<view class="container">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
欢迎访问我的个人网站：idig8.com
公众号：编程坑太多
</view>

order-flex.wxss

.container{
  display: flex;
  justify-content: flex-start;
}

.size{
  height: 150rpx;
}
.a {
  background: red;
  order:5;
  flex:4;
}
.b {
  background: yellow;
  order:1;
  flex:1;
}

.c {
  background: blue;
  order:3;
  flex:2;
}

.d {
  background: green;
  order:32;
  flex:3;
}

.e {
  background: gold;
  order:4;
  flex:2;
}

69d9082479420d30efdf0df2696d36fc.png

PS：flex布局基本说完了，基本也给各种场景下的属性含义直观的方式进行了演示，但是老铁虽然我搞完了，但是你们如果想学小程序还是勤加练习的，好脑子不如烂笔头对吧！

weixin_39846364
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从左往右 从上到下依次排序 flex css_CSS 知识总结|精选博客
weixin_39619635的博客
11-29 1513
今天，我大致来总结一下我近期学习到的CSS的知识点，对这些内容进行一个回顾与整理。我们大致从以下几方面进行整理和回顾：1. CSS简介2. CSS的选择器3. CSS样式4. 文档流与盒模型5. CSS布局6. CSS定位7. CSS动画CSS简介CSS的历史CSS的全称为：Cascading Style Sheets，层叠样式表。它是由李爵士的挪威同事赖先生在1994年提出的。CSS的...
writing-mode、flex实现css多列布局，从上到下，从左到右
不知不觉 | 笔记
06-28 1346
需求： 实现list从上到小排列，一列三行；余下的另起一列。 效果直接运行html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多列布局</title> <style> .container { writing-mode: vertical-lr; .
小程序的flex布局
清欢Viki的博客
04-23 141
简单介绍 微信官方推荐使用flex布局进行排版 flex是一个盒装弹性布局，即盒子嵌套(类似div中嵌套div)，如下 具体布局 wxss文件中定义布局 display：flex flex容器属性(wxss中) flex-direction 排列方向 row 横向从左到右(默认) row-rev...
Flex布局
叱咤少帅的博客
01-19 262
前言 在传统的CSS中，我们会用到浮动，清除浮动等操作。有时候还需要计算，比较麻烦。但是有了flex会让代码更加简单。并且Flex是基于IE9+ 才知道的，特别是移动端应用非常广泛。 ...
微信小程序 - FlexLayout布局源码.zip
最新发布
05-08
微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip ...
微信小程序源码模版_FlexLayout布局.rar
06-10
微信小程序源码模版_FlexLayout布局.rar
FlexLayout布局_微信小程序模板js代码前台前端H5页面源码.rar
08-09
FlexLayout布局_微信小程序模板js代码前台前端H5页面源码.rar
小程序flex布局祥解.xlsx
05-26
对小程序中flex布局中用到的代码做了祥尽的整理。
小程序源码（无后台）_FlexLayout布局.rar
06-12
版权声明: 本资源仅供学习参考,不得进行任何商业用途!
flex布局
qq_50260510的博客
03-13 441
是一种浏览器提倡的布局模型，布局网页更简单、灵活，还可以避免浮动脱标的问题，非常适合结构化布局。父元素添加 display: flex，子元素可以自动的挤压或拉伸。在Flex布局模型中，可以通过调节主轴或侧轴的对齐方式来设置盒子之间的间距。弹性容器、弹性盒子、主轴、侧轴 / 交叉轴。
图文并茂 最详细的flex布局入门介绍 十分钟带你玩转flex布局
qq_42077395的博客
03-17 7722
前奏 作为一个热衷后台开发的程序猿，自己对于前端页面布局掌握的真的不是太好，以前做过的大多数页面都是用bootstrap框架快速搭建的。在大学期间，页面布局仅仅学过一些table布局，div+css布局，瀑布流式布局，圣杯布局等等，前段时间在微信小程序上布局几个页面，发现用position+float布局起来很麻烦，就恶补了下flex布局。 Flex（弹性）布局，2009...
从左往右 从上到下依次排序 flex css_CSS知识总结
weixin_39710951的博客
12-06 576
查看浏览器是否支持某个样式Can I use... Support tables for HTML5, CSS3, etc​caniuse.comBorder调试法用来调试哪个地方的样式出现了错误 使用方法：怀疑那个元素出现了问题就在此元素的附近添加border,观察是否出现了预期的效果，定位出错元素的位置 CSS常见错误选择器拼写错误属性名拼写错误属性值拼写错误大小写错误没写分号中文冒号没写反花...
Flex布局教程详解（参考自阮一峰的Flex布局教程）
行知致简的专栏
10-06 1693
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"；注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效；Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒子模型提供最大的灵活性；
一文让你学会flex布局关于主轴 、侧轴的布局方式
m0_73920697的博客
10-21 2922
弹性盒子没有固定大小，弹性盒子就是内容大小，添加stretch取值会被拉伸 */space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间。space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧。space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等。/* 结论: Flex布局中,弹性盒子会在弹性容器中被拉伸或者被挤压。在stretch效果中,弹性盒子会沿着侧轴被拉伸直到充满整个盒子。弹性盒子有固定的大小，盒子该多大，就是多大。
flex布局（弹性盒子二）
m0_72959685的博客
08-24 1382
意思是设置了属性值为space-start后，子元素盒子在父元素最中间左上，左中、左下，中上、中中、中下......排列，且每个子元素盒子与父元素之间都有一定的空隙。意思是设置属性值为space-around后，三个盒子分别排列在父元素盒子的左 右 中间，且两边盒子与父元素两边有较大空隙。意思是设置了属性值为space-start后，子元素盒子在父元素最中间左上，左中、左下，中上、中中、中下......排列，意思是设置属性值为 flex-end后，盒子从右向左排列在父元素盒子中，开始位置在最右最上边。
flex弹性盒子 justify-content: space-between； 最后一排不满的处理
joy1793的博客
05-07 3269
flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况 原图 实现效果 方案1：父级添加after伪类法，解决最后一排数量不够两端分布的情况 html <div class="tem-flex"> <div class="tem-list" v-for="item in len">列表</div> </div> js d...
微信小程序上下左右flex布局
09-20
微信小程序采用的是Flex布局，可以实现上下左右的布局。通过设置flex-direction属性来决定子元素的排列方向，可以使用row来实现水平排列，column来实现垂直排列。通过设置justify-content属性来决定子元素在主轴方向...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值