百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

前端Flex布局可视化布局工具介绍,vue和html5快速设计利器

zhezhongyun 2025-01-23 22:26 444 浏览

在html css设计中,对于控件布局是一个界面美观重要工具。传统布局工具是盒状模式,它布局通过依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

因此在2009年,W3C推出 flex布局,也叫flexbox,直译就是弹性盒子。它可以简便、完整、响应式地实现各种页面布局,是一个越来越流行的布局方式,常见浏览器都支持,而在微信小程序,uni-app,vue等各种环境也缺省使用这个布局。因此做前端开发,flex布局必须要掌握的。

我们首先要学习一些flex布局的基本概念



在 flex 容器中默认存在两条轴,水平方向的主轴(main axis) 和垂直方向的交叉轴(cross axis),

在容器中的每个单元块被称之为 flex item,每个项目占据的主轴空间为 (main size),你可以理解为宽, 占据的交叉轴的空间为 (cross size),你可以理解为高。

在css中,指定display为flex即表示采用flex布局

.container {
    display: flex 
}


我们使用flex布局最重要一点是,每个元素主要用它的在不同屏幕下如何动态变化。因此需要有一个属性来定义这一些变化

其中最重要有:

  1. flex-direction属性决定主轴的方向(即元素的排列方向)
  2. flex-wrap: 决定容器内元素是否可换行
  3. justify-content:定义了元素在主轴的对齐方式
  4. align-items: 定义了元素在交叉轴上的对齐方式
  5. align-content: 定义了多根轴线的对齐方式,即定义换行后,换行之间的对齐方式,没有换行这一属性不起作用

有一个在线可视工具可以演示这一些属性值对于控制布局产生的影响,一但改变值就会实时演示,非常直观。

但如果需要更加详细的细节控制,我们需要一些其它工具,在使用这一些工具前,我们先了解一些flex item的用于布局内部属性。

  • order: 定义项目在容器中的排列顺序,数值越小,排列越靠前,默认值为 0
  • flex-basis 定义了 该flex元素的基准大小,缺省值是auto,也可以一个确定的值,比如100px,你可以理解是在排列轴上的初始值。
  • flex-grow定义该flex元素在主轴上的扩展比例,它是一个确定整数,可正可负。比如这一行元素grow为1,表示各个元素等比扩展。默认值为 0,即如果存在剩余空间,也不放大
  • flex-shrink: 定义了项目的缩小比例,如果所有项目的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小,为 0,其他项目都为 1,则空间不足时,前者不缩小。
  • flex: flex-grow, flex-shrink 和 flex-basis的简写,即用空格隔开三个值对应着 flex-grow flex-shrink flex-basis三个值。比如 flex: 0 1 0%

有一些常用值

? ? ??flex: 1
  //相当于,可以任向扩大缩小,初始值为0
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

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

flex: 0 0 100rpx; /* 不放大不缩小固定100rpx *
/*可以简写成*/
flex: 100rpx




  • align-self: 允许单个项目有与其他项目不一样的对齐方式

有如下取值auto | flex-start | flex-end | center | baseline | stretch,除了auto,其他都与align-items属性完全一致

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。


有一些在线工具可以控制元素,虽然不是一比一仿真也是减轻一些工作。

另外一个有用工具就是Chrome的元素检查,可以实在检测一些定义上错误



Flex实例

一个常见例子,启动画面,下方有四个按钮固定在底部,顶部空间随屏幕大小拉伸,logo居中显示在顶部空间。以下就是使用flex布局实现真实效果。


这个采用列排列,每个按钮布局值 flex-grow: 0; flex-shrink: 0;表示大小不变

而顶部空间flex-grow:1 ,这样相当于顶部空间将随屏幕大小拉伸。


而logo居中显示在顶部空间,也是嵌套一个flex布局,并且定义水平和垂直居中即可实现

.top {
	flex:1;  //上一层flex的定义

  //嵌套一个flex
	display:flex;
	justify-content:center;
	align-items:center;
}

.logo {
    width: 11.25rem;
    height: 12.13rem;
}


整体布局

css定义

.container{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
.bg-set{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.content {
  
  display:flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-content: center;
  align-items: center;
  
  
  
}

.top {
	flex:1;

	display:flex;
	justify-content:center;
	align-items:center;
}

.logo {
    width: 11.25rem;
    height: 12.13rem;
}

.button1 {
  width: 21.5rem;

    order: 2;
    align-self: auto;
 flex-basis: 5rem;
 flex-grow: 0;
 flex-shrink: 0;
}
.button2 {
   width: 26.31rem;
    order: 3;
    align-self: auto;
    flex-basis: 5rem;
    flex-grow: 0;
    flex-shrink: 0;
}
.button3 {
    width: 19.63rem; 
    order: 4;
    align-self: auto;
    flex-basis: 5.4rem;;
    flex-grow: 0;
    flex-shrink: 0;
}
.button4 {
    width: 23.88rem;
    order: 5;
    align-self: auto;
    flex-basis: 5.4rem;
    flex-grow: 0;
    flex-shrink: 0;
}

.mbottom{
	order: 6;
	width:100%;
	flex:0 0 2rem;
}

#头条创作挑战赛#

相关推荐

3D边框效果绝了Jetpack Compose也太会玩了吧

在JetpackCompose中创建惊艳的3D边框效果大家好!今天我要分享一个超酷的技巧——如何在JetpackCompose中创建3D边框效果。这种效果可以应用于任何视图和任何形状...

“雨”你同行,他们在岗位上为您守护……

7月10日京津冀地区迎来降雨天气京铁人以“降雨预警”为令迎风而上逆水而行全力守护铁路运输安全雨帘下的“摆渡人”北京站、石家庄站及时铺设防滑垫,检查排水设施,确保旅客行走通道安全。北京北站加密站台巡视...

战士实用小福利!巧用宏命令让血条更直观

很多战士朋友经常被怒气和血条所困扰,如何及时的进行规避开启防御技能?如何更好的利用怒气打出伤害?成为了众多战士的首要问题。现在即使在没有插件的支持下我们也可以实现这样的功能,巧用宏命令就可以让怒气和血...

python操作word 添加导航栏,导航栏在左边显示

点赞标记,明天就能用上这几个技巧!要实现Python生成Word文档并显示左侧导航栏(即导航窗格),需通过标题样式标记文档结构+修改文档视图设置两步完成。以下是详细且经过验证的解决方案,基于pytho...

田渊栋等原班人马作:AI生成长篇故事,数千字长文也能连贯、有趣

机器之心报道编辑:小舟、陈萍以后,写故事这脑力活可以交给AI了。前段时间,模仿人类写作过程的语言模型Re^3发布,该模型不需要微调大模型,而是通过设计prompt来生成一致性强的故事。现在...

VBA常用代码_1、文本格式整理

本人财务岗位,非专业编程人员,请勿以专业看待哈,能用无BUG即可!均是我在工作中常用的补充功能,且具有通用性的功能。基于实用性而编写。不见理论,只需要你会复制粘贴就行。看完第一篇文章,结合之后更新的内...

行业首选的文档管理工具Aspose.Words新版本v16.3.0发布

Aspose.Words是一款先进的文档处理控件,在不使用MicrosoftWords的情况下,它可以使用户在各个应用程序中执行各种文档处理任务,其中包括文档的生成、修改、渲染、打印,文档格式转换和...

作为前端工程师必须懂得的33个CSS核心概念

你真的懂CSS吗?层叠样式表(CSS)是网页设计的支柱,能将单调的HTML转变为视觉惊艳的交互界面。要精通CSS,必须理解从基础选择器到动画、响应式设计等高级技巧在内的核心概念。无论你是初学者还是资深...

全力做好节假日期间服务保障工作

为保障五一期间ETC运营工作正常有序开展,甘肃省高速公路ETC管理服务中心全力以赴、恪尽职守,使各项工作有备无患。一是要求中心全体职工牢固树立安全发展观念,时刻紧绷“安全弦”,夯实安全生产基础,落实安...

Manila's hyping up of illegal 'arbitral award' nothing but a damp squib

Manila'shypingupofillegal'arbitralaward'nothingbutadampsquib:ChinaDailyeditorial-Opi...

QLabel 文字两端对齐解决方案

在Qt开发中,实现QLabel文字两端对齐是一个常见需求。本文将介绍多种在Qt中实现QLabel文字两端对齐的方法及其原理。Qt本身具备文字两端对齐的支持,但需要同时使用Qt::AlignJ...

tkinter中的一些自定义控件,你知道几个呢?

用tkinter图形库编写过界面的朋友都知道,tkinter中拥有的图形控件很少,ttk中虽然新增了一些,但是这也不足以满足我们的使用,因为我们在编写图形界面的时候会用到各种各样的控件,有些是tkin...

一个人的婚礼:她送给自己的新婚礼物是遗体捐献书

style="text-indent:2em;">1月20日,在重庆武隆区医院的病房里,爱心人士为21岁的杨春燕在医院举办了一场没有新郎的婚礼,圆了春燕穿婚纱、走红毯的心愿,仪式后春燕签署了遗体...

毕业论文小技巧:word排版之章节自动化编号

设置大纲多级列表目的是方便增删章节时实现章节标号的自动编号,并且实现论文图表公式编号按照章节顺序自动编号。准备工作:假设前面已经定义好章节标题样式分别为标题一论文章标题、论文节标题、论文小节标题、论文...

伊朗呼吁土耳其立即终止对叙军事行动

style="text-indent:2em;">新华社德黑兰1月21日电(记者马骁穆东)伊朗外交部21日发表声明说,希望土耳其立即终止在叙利亚阿夫林发起的军事行动,避免叙北部危机进一步恶化。...