flex布局

介绍

flex（弹性盒子布局）是一种现代的布局模式，它允许你以一种简洁、高效的方式对容器内的元素进行布局。flexb特别适合于响应式设计，因为它可以轻松地处理不同屏幕尺寸的布局需求。

基础用法

	<!--- 水平布局 --->
	<div class="flex"></div>
	<div class="flex horizontal"></div>
	
	<!--- 垂直布局 --->
	<div class="flex vertical"></div>
	
	<!--- 居中--->
	<div class="flex center middle"></div>

关键字

应用于父元素

名称	描述
flex	使用flex布局
horizontal	水平布局
vertical	垂直布局
center	水平方向居中
middle	垂直方向居中
left	左对齐
right	右对齐
top	上对齐
bottom	下对齐

应用于子元素

名称	描述
flex-fixed	固定尺寸(不伸缩)
flex-auto	自动伸缩

示例

布局方向&对齐方式

<template>
	<!--- flex容器 --->
	<div class="flex horizontal center middle pad-v-6 w-full h-24" style="border-bottom: 1px solid lightgray;">
		<div class="flex-fixed size-12 bg-red-500"></div>
		<div class="flex-fixed size-12 bg-green-500"></div>
		<div class="flex-fixed size-12 bg-blue-500"></div>
	</div>
</template>

布局方向:

 horizontal

 vertical

水平对齐:

 left

 center

 right

垂直对齐:

 top

 middle

 bottom

自动伸缩

flex-fixed

flex-auto

flex-fixed

 horizontal

 vertical

 flex-fixed

 flex-auto

间距

名称	描述
gap-*	设置间距, 支持1,2,4,6..., 参考步进与区间, 最大支持到20
gap-rows-*	设置行间距
gap-cols-*	设置列间距

• 支持缺省值, gap 等价于 gap-1, gap-rows和gap-cols也是同理

间距:

 gap-none

 gap-1

 gap-2

 gap-4

 gap-6

 gap-8

 gap-10

 gap-12

 gap-14

 gap-16

 gap-20