吐血整理!一文吃透小程序必备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

目录
打赏
0
0
0
0
7
分享
相关文章
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?
Bootstrap5 Flex(弹性)布局4
排序:.order 类可设置弹性子元素的排序,范围从 .order-1 至 .order-12,数字越小优先级越高。外边距:.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹:.flex-nowrap(默认)、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
Bootstrap5 Flex(弹性)布局6
使用 `.align-self-*` 类可控制指定子元素的对齐方式,包括 `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, 和 `.align-self-stretch`。示例代码展示了如何在一个弹性布局中应用这些类,以实现不同设备上的响应式设计。
Bootstrap5 Flex(弹性)布局5
使用 .align-content-* 控制多行子元素在垂直方向上的堆叠方式,如 .align-content-start、.align-content-center 等。对于单行子元素,使用 .align-items-* 控制对齐,例如 .align-items-start、.align-items-center 等。示例代码展示了不同对齐效果的应用。
Bootstrap5 Flex(弹性)布局2
介绍Flex布局的水平和垂直方向控制。`.flex-row`使子元素水平排列,默认左对齐;`.flex-row-reverse`则右对齐。`.flex-column`让子元素垂直排列;`.flex-column-reverse`则反向排列。示例展示了不同类的效果,通过改变类名实现布局调整。
Bootstrap5 Flex(弹性)布局3
`.justify-content-*` 类用于调整弹性子元素的对齐方式,支持 start、end、center、between、around 等值。`.flex-fill` 类使所有子元素等宽,而 `.flex-grow-1` 则让指定子元素占据剩余空间。这些类在布局设计中非常实用。
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
3月前
|
HTML中使用Flex布局实现双行夹批效果
在HTML中,还可以用table元素来实现双行夹批效果,但比flex布局代码更复杂,效果也不见得更理想。
60 10
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
147 10

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等