吐血整理!一文吃透小程序必备Flex布局

简介: 吐血整理!一文吃透小程序必备Flex布局

吃透小程序必备Flex布局

小程序作为移动端的应用,在设计小程序交互界面时,不同的div模块需要设计不同的排版布局,网页布局往往是前端UI设计中的重点和难点。

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。


为什么我们需要Flex?

针对移动端的各式各样的屏幕比例,要将我们的小程序完美配置各类屏幕。我们往往需要考虑页面中的元素的边距是否能随着不同的屏幕适配比的改变而保持着良好的样式状态。Flex布局便可实现一套代码自动适配不同端的屏幕适配。完美解决你的元素布局的苦恼。


一、Flex基础语法

ee91f98a3c609c697a635344fe7bfb1d.png如图所示,蓝色矩形为flex容器,我们要将元素按照flex的语法规则进行样式布局之前,我们需要先弄清两个轴的概念,因为后续的属性都是围绕两个轴而展开。横向为主轴,纵向为侧轴。


1、display:flex

  • 任何容器都可通过display:flex进行弹性布局的设置
  • 行内元素使用display: inline-flex进行弹性布局的设置


2、flex-direction

flex-direction决定主轴的方向(即项目的排列方向),其常用的属性有:

  • row(默认值):主轴为水平方向,起点在左端。

cab3b6303bb1bb342b4f6b6ca09f5fd8.png


  • row-reverse:主轴为水平方向,起点在右端。

e8aa5aacc9f38b39bb34c4cab3810c66.png


  • column:主轴为垂直方向,起点在上沿。

a0b0ea74f2e1c6ba66a028705311434c.png


  • column-reverse:主轴为垂直方向,起点在下沿。

445642ea18f43bcec10d9c68b952f9b9.png


3、flex-wrap

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

  • nowrap(默认):不换行。
  • wrap:换行,第一行在上方。
  • wrap-reverse:换行,第一行在下方。


4、flew-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。


5、justify-content

justify-content属性定义了项目在主轴上的对齐方式。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。


6、align-items

align-items属性定义项目在交叉轴上如何对齐。

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。


7、align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

flex-start:与交叉轴的起点对齐。

flex-end:与交叉轴的终点对齐。

center:与交叉轴的中点对齐。

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值):轴线占满整个交叉轴。


二、Flex布局必备样例

Flex布局的样式相对较多,要一次性全记住有一定的难度。所以我们在平时使用时可以通过在线调试的方式对flex的效果进行可视化调整,从而最终选择我们想的效果。

推荐一个在线Flex布局样式生成神器:Flex布局在线可视化终极解决方案!

0b4acd4d13edee950f08bf34adec6d10.png

相关文章
|
18天前
|
小程序
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
15 1
|
2月前
|
小程序 前端开发 JavaScript
使用CSS的媒体查询功能在小程序中实现自适应布局
使用CSS的媒体查询功能在小程序中实现自适应布局
|
2月前
|
编解码 小程序 前端开发
在小程序中实现自适应布局或响应式设计
在小程序中实现自适应布局或响应式设计
|
8月前
|
JSON 小程序 JavaScript
小程序中如何使用自定义组件应用及搭建个人中心布局
小程序中如何使用自定义组件应用及搭建个人中心布局
43 0
|
2月前
|
小程序 数据可视化 开发者
微信小程序开发入门介绍-布局组件
微信小程序开发入门介绍-布局组件
|
2月前
|
JSON 小程序 JavaScript
面试官说,布局小程序页面记得用TDesign组件库
面试官说,布局小程序页面记得用TDesign组件库
|
2月前
|
小程序 JavaScript
微信小程序学习笔记(3) -- 伸缩布局
微信小程序学习笔记(3) -- 伸缩布局
|
8月前
|
JSON 小程序 前端开发
小程序搭建OA项目首页布局界面
小程序搭建OA项目首页布局界面
60 0
|
8月前
|
小程序 JavaScript
小程序实现竖行布局视图(类表格)
小程序实现竖行布局视图(类表格)
50 0
|
8月前
|
JSON 小程序 前端开发
微信小程序首页-----布局(详细教程赶快收藏吧)
微信小程序首页-----布局(详细教程赶快收藏吧)
128 0