玩转微信小程序页面的flex布局

简介: 文本主要讲解flex布局的基础知识

微信小程序flex布局

Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的或者不确定的大小的。
使用flex布局,就得在样式里加上 display: flex

justify-content

  • flex-start:主轴起点对齐(默认值)

在这里插入图片描述

  • flex-end:主轴结束点对齐

在这里插入图片描述

  • center:在主轴中居中对齐

在这里插入图片描述

  • space-between:两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等

在这里插入图片描述

  • space-around:每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同

在这里插入图片描述

  • space-evently:项目在主轴上均匀分布

在这里插入图片描述

flex-direction

横向布局和纵向布局

  • flex-direction: row:从左到右的水平方向为主轴
  • flex-direction: row-reverse:从右到左的水平方向为主轴
  • flex-direction: column:从上到下的垂直方向为主轴
  • flex-direction: column-reverse:从下到上的垂直方向为主轴

align-items

  • stretch 填充整个容器(默认值)
  • flex-start 侧轴的起点对齐
  • flex-end 侧轴的终点对齐
  • center 在侧轴中居中对齐
  • baseline 以子元素的第一行文字对齐

flex-wrap

用于控制子 View 是否换行,有3个值可选:

  • nowrap:不换行(默认)

在这里插入图片描述

  • wrap:换行

在这里插入图片描述

  • wrap-reverse:换行,第一行在最下面

在这里插入图片描述

相关文章
|
2月前
|
开发者 容器
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?
|
1月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
112 57
|
22天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
9天前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中,还可以用table元素来实现双行夹批效果,但比flex布局代码更复杂,效果也不见得更理想。
|
10天前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
39 10
|
22天前
|
容器
在 Flex 布局中,如何设置元素在侧轴上的初始对齐方式?
【10月更文挑战第22天】同时,还可以进一步探索其他 Flex 布局相关的属性和技巧,以更好地掌握 Flex 布局的强大功能,创造出更具创意和适应性的页面布局。
25 2
|
27天前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
44 1
|
2月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
1月前
|
前端开发 容器
flex布局
【10月更文挑战第7天】
28 1