flex布局：

flex 布局是继 标准流布局 、 浮动布局 、 定位布局 后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或
均匀分布，甚至可以随着窗口缩放自动适应。 flex 布局在浏览器中存在一定的兼容性（具体参
考： https://developer.mozilla.org/zh-
CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7
）。但是在小程序中，是完全兼容 flex 布局的，并且微信官方也是推荐使用 flex 布局的。下面就来详细的讲
下 flex 布局。
一个小例子：
看以下代码：
<view class='outter'>
<view class='inner'>1</view>
<view class='inner'>2</view>
</view>
.outter{
display: flex;
justify-content: space-between;
width: 300px;
height: 200px;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
}
最后的效果图

基本概念：

  1. 弹性容器：包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
  2. 弹性项目(Flex item)：弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性项目。也可以称为子容器。
  3. 轴(Axis)：每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
  4. 方向(Direction)：可以通过 flex-direction 来确定主轴和侧轴的方向。

设置在主轴上的排列方式：

默认情况下，主轴的方向是从左到右。在主轴方向上，可以通过 justify-content 属性来设置他们的排列方式。排列方式有以下几种：

1.flex-start ：项目靠近父盒子的左侧。默认采用的就是这种排列方式。示例图如下：

2. flex-end ：项目靠近父盒子的右侧

3. center ：所有项目会挨在一起在父盒子的中间位置

4. space-around ：项目沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半

5. space-between ：项目沿主轴均匀分布，位于首尾两端的子容器与父容器紧紧挨着

6. space-evenly ：项目在主轴上均匀分布，收尾两端的自容器到父容器的距离跟自容器间的间距是一样的

设置在侧轴上的排列方式：

默认情况下，侧轴的方向是从上到下。在侧轴方向上，可以通过 align-items 属性来设置他们的排列方式。排列方
式有以下几种：
1. flex-start ：起始端对齐。默认就是这种对齐方式

2. flex-end ：末尾段对齐

3. center ：中间对齐

4. stretch ：如果项目没有设置高度。那么子容器沿交叉轴方向的尺寸拉伸至与父容器一致。比如我们
将 .inner 的高度属性去掉，代码如下：
.outter .inner{
background: gray;
width: 100px;
/* height: 100px; */
border: 1px solid #ccc;
}

效果图为：

5. baseline ：基线对齐，这里的 baseline 默认是指首行文字，所有子容器向基线对齐，交叉轴起点到元素基线
距离最大的子容器将会与交叉轴起始端相切以确定基线。比如我们把代码改成如下：
<view class='outter'>
<view class='inner'>
<view style='margin-top:10px;background:#eee;'>hello</view>
</view>
<view class='inner'>2</view>
</view>
然后 wxss 文件为： 
.outter{
display: flex;
align-items: baseline;
width: 300px;
height: 200px;
background: pink;
}
.outter .inner{...}

那么效果图为：

更换主轴和侧轴方向

主轴默认的方向是从左到右，侧轴的方向默认是从上到下，当然也可以进行修改。可以通过 flex-direction 进行修改。可以修改的参数为以下：

1. row ：默认属性。从左到右

2. row-reverse ：从右到左

3. column ：从上到下

4. column-reverse ：从下到上

换行
默认情况下，元素个数如果超过一定数量，那么在一行当中就排列不下。此时 flex 默认的处理方式是压缩元素，
使其能在一行中排列下来。比如以下代码：
<view class='outter'>
<view class='inner'>1</view>
<view class='inner'>2</view>
<view class='inner'>3</view>
<view class='inner'>4</view>
</view> 
.outter{
display: flex;
width: 300px;
height: 200px;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
border: 1px solid #ccc;
}

那么会把这四个元素挤压在一行中。即使给元素设置了宽度也没有用的。效果图如下：
可以通过 flex-wrap 来改变排列的方式。可以设置的属性如下：
1. nowrap ：不换行。默认的

2. wrap ：换行

3. wrap-reverse ：换行，但是第一行会在下面

align-content属性

在排列中，如果有多行，那么这个属性是设置多行之间的排列方式。可以通过 align-content 属性来确定排列的方式。可以设置以下值

1. flex-start ：从上往下排列。示例代码如下： 
.outter{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 300px;
height: 300px;
background: pink;
}

2. flex-end ：末尾段对齐。效果图如下：

3. center ：中点对齐。效果图如下：

4. space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。效果图如下：

5. space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。效果图如下：

6. stretch ：默认方式，如果没有给元素设置高度，那么会占满整个交叉轴

.outter .inner{
background: gray;
width: 100px;
/* height: 100px; */
border: 1px solid #ccc;
box-sizing: border-box;
}

效果图如下：

元素（子容器）的相关属性

flex-basis：

定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。
.item {
flex-basis: <length> | auto;
}
默认值：auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。
当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-
shrink 配合使用才能发挥效果。
当 flex-basis 值为 0 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。
当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。

flex-grow：

设置元素是否需要扩大的比例。默认值为0，即如果存在剩余空间，也不放大。比如有以下代码：
<view class='outter'>
<view class='inner inner1'>1</view>
<view class='inner inner2'>2</view>
</view>
wxss代码为：
.outter{
display: flex;
width: 300px;
height: 300px;
flex-wrap: wrap;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.outter .inner1{
flex-grow: 2;
}
.outter .inner2{
flex-grow: 1;
}

效果图为：

因为两个元素分别占了2份，1份，所以第一个元素是占据了整个容器宽度的2/3，第二个元素占据了整个容器宽度
的1/3。
另外，如果设置 flex-grow 为0，那么他的宽度将会保持为设置的宽度，如果宽度没有设置，那么将根据他的子元素
来保留宽度。假如代码为： 
<view class='outter'>
<view class='inner inner1'>1</view>
<view class='inner inner2'>2</view>
</view>

wxss代码为： 
.outter .inner1{
flex-grow: 0;
}
.outter .inner2{
flex-grow: 1;
}

效果图为：

如果把 inner1 的 width 删掉，那么效果图为：

flex-shrink属性：

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。比如有以下代码： 
<view class='outter'>
<view class='inner inner1'>1</view>
<view class='inner inner2'>2</view>
<view class='inner'>3</view>
<view class='inner'>4</view>
</view>

wxss的代码如下： 
.outter{
display: flex;
width: 300px;
height: 300px;
background: pink;
}
.outter .inner{
background: gray;
width: 100px;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.outter .inner2{
flex-shrink: 0;
}

效果图为：

因为给 inner2 设置了 flex-shrink 为0，所以即使在空间不够的情况下，他也不会被压缩。

flex属性：

flex属性是 flex-grow flex-shrink flex-basis 三个属性的简写。假设以上三个属性同样取默认值，则 flex 的默认值
是 0 1 auto 。
关于 flex 的取值，有以下几种方式：

1. auto ：等价于 1 1 auto 。也就是允许增长，允许缩小，宽度为自动。

2. none ：等价于 0 0 auto 。也就是不允许增长，不允许缩小，宽度为自动。

3. 非负数字：这个数字表示的是 flex-grow 的值， flex-shrink 为1，表示允许缩小， flex-basis 为0%。可以认为 他就是把剩余的空间进行填充。比如以下代码是等价的：

.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

4. 0 ：对应的三个值分别为 0 1 0% 。比如以下代码是等价的：

.item {flex: 0;}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
}

5. 长度或者百分比：则这个值视为 flex-basis 的值，而 flex-grow 为1， flex-shrink 为1。比如以下代码是等价的：

.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}

6. 两个非负数字：分别视为 flex-grow 和 flex-shrink 的值， flex-basis 取 0% ，如下是等同的：

.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}

7. 一个非负数字和一个长度或百分比：则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 11 32px;}
.item {
flex-grow: 11;
flex-shrink: 1;
flex-basis: 32px;
}

微信小程序flex布局讲解相关推荐

  1. image 微信小程序flex_微信小程序flex布局案例(1)

    微信小程序 flex 布局案例一 前言 最近在学习微信小程序时,看到很多布局都用到了 flex 布局,其实 flex 布局学习过好多东西不用就忘记了,这次用上就只得再去看了,争取学会.下面是我做的简单 ...

  2. 微信小程序flex布局怎么实现上中下3行铺满整个窗口。

    问题描述: 在微信小程序中使用flex实现上中下3行布局铺满整个窗口. 如图 **WXML ** <!--/* ***HotApp云笔记,基于HotApp小程序统计云后台 ***免费云后台申请地 ...

  3. 微信小程序-Flex布局的使用

    一.基本说明: Flex模型能够提高页面的布局效率,对于微信小程序来说,当页面需要适应不同屏幕尺寸及设备类型时,使用该模型布局可以得到事半功倍的效果. Flex模型也称为盒子模型(FlexiableB ...

  4. 微信小程序——flex布局

    flex布局的基本知识 flex布局作用于父容器之上,用于控制其子盒子的位置和排列的方式. flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活 ...

  5. 小程序flex布局不生效

    20210510微信小程序flex布局不生效 原本的代码我还没看出来错在哪里了,求路过大佬指正 原本的效果: 原本的代码: wxml : <!-- 推荐内容--><scroll-vi ...

  6. 微信小程序flex弹性布局

    微信小程序常用布局为flex.使用flex模型来提高页面布局效率,当页面需要适应不同屏幕大小以及设备类型,该模型一确保元素在恰当的位置. 属性 解释 默认值 其它值 flex-direction 排列 ...

  7. 7.微信小程序（布局适配与物理逻辑像素）

    微信小程序(布局适配与物理逻辑像素) 前言 移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下 关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP. ...

  8. 微信小程序中布局使用的css布局语法

    微信小程序的布局是基于css的布局,可以参考一些学习网站上面的css的基础学习 以下是布局的一些语法规则 class 用  .class{} id    用  #id{} 类的子元素添加css  (1 ...

  9. “喜茶Go”店商微信小程序界面布局的架构思路（源代码讲解）

    作者介绍:郝天翔,10年移动互联网软件行业经验,全栈高级软件工程师,微信生态开发先行者,主要参与智慧城市新零售电商领域方案的设计与实施,本次分享商业案例"喜茶Go",已落地于全国多 ...

  10. 微信小程序页面布局——上中下结构

    小程序页面布局--上中下结构 内容简述 上中下结构:头脚固定+中间滚动框 使用UI框架:Vant Weapp(引入安装参考) 为了方便,使用了less生成wxss,所以展示的是less代码,有需要可以 ...

最新文章

  1. 自查自纠 | 线性回归，你真的掌握了嘛？
  2. Java黑皮书课后题第3章：**3.27（几何：点是否在三角形内）假设一个平面上有一个直角三角形。编写程序，提示用户输入一个点的x坐标和y坐标，然后判断这个点是否在该三角形内
  3. css3中变形与动画（三）
  4. 2015-10-07 jQuery2
  5. python excel 提取特定行_Python之从Excel一列内提取数字
  6. idea 阿里巴巴规范插件_阿里巴巴 Java 开发者手册，编码事半功倍
  7. php ini文件操作类,操作.ini文件的好PHP类
  8. android studio重置
  9. 如何查看linux的系统配置，多少个核心，多少个线程？CPU的主频 查看内存
  10. 使用include-what-you-use优化编译速度
  11. Android肝帝战纪之Fragmentation的使用(单Activity+多Fragment设计)
  12. Hadoop服务器集群崩溃的解决方案
  13. 谁将成为人工智能行业的“领头羊”？
  14. passwd出现不完全匹配登陆成功的情况，问题解决如下
  15. 9款红包封面来了，定好闹钟领取！
  16. python将图片转换为抽象画
  17. 我问 ChatGPT Java 编程语言的优缺点是什么？它这么回答……
  18. 图论算法基础-BFS与DFS
  19. Java charAt() 方法
  20. Windows 11 Insider Preview Build 22621.730/22623.730(KB5017385)发布！

热门文章

  1. 安装tcpreplay时报错：configure: error: libdnet not found
  2. matlab中whos怎么用,【安富莱DSP教程】第3章 Matlab 简易使用（一）
  3. GB50174《电子信息系统机房设计规范》标准目录
  4. fw313r手机登录_2017最新迅捷(FAST)fw313r路由器手机设置教程
  5. 自考计算机离散数学,计算机及应用自考资料2014 10 离散数学02324.doc
  6. java netbean_java NetBean创建及各菜单项相对应的窗体及布局教程.pdf
  7. 微软模拟飞行2020 数字化建模分析
  8. 如何设置windows服务
  9. LaTex下载与安装教程（一切为了学术~）
  10. Watir vs Selenium