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

从零开始的Flex布局掌握(flex布局实战)

liuian 2025-02-03 13:58 14 浏览

前言

在现代网页设计中,布局是一个至关重要的环节,在过去的一段时间里,页面的布局还都是通过tablefloat定位以及其他的 CSS 属性来完成的,随着用户需求的不断变化和设备种类的多样化,旧的布局方式难以满足各种场景的需求,Flex的出现很大程度地缓解了这种现象,这是一种非常强大的布局工具,可用于实现各种复杂的网页布局及响应式设计

Flex布局

Flex,全称为Flexible Box,意为弹性布局,是CSS3的一种布局模式,可用于设计灵活的响应式布局

Flex是在2009年,由W3C提出的,作为CSS3规范的一部分,最早的Flex规范被称为"Box Alignment for User Interface Layout",随后经历了多个版本的修改和改进,在2012年基本成型,最终在2017年定稿并成为W3C的正式推荐标准

其兼容性如下(几乎主流的现代化浏览器均支持):

基本概念

任意元素都可使用Flex布局,只需设置display属性为flexinline-flex即可,如:

采用Flex布局的元素,可称为Flex容器(flex container),作为父元素,其内的所有直接子元素自动转换为Flex项目(flex item)

Flex项目的主要根据Flex容器的两根轴进行排列和对齐

主轴(Main Axis)

Flex容器中定义的主要布局轴,默认情况下,主轴是水平向右的,Flex项目会从左到右排列,其在主轴上占据的尺寸称为主尺寸(main size)

交叉轴(Cross Axis)

是与主轴垂直的轴,默认情况下,交叉轴是垂直向下的,交叉轴的方向取决于主轴的方向,Flex项目交叉轴上占据的尺寸称为交叉尺寸(cross size)

容器属性

下列属性主要应用于Flex容器

flex-direction

flex-direction属性可以改变主轴的方向,即决定Flex项目的排列方向

常见的flex-direction值包括:

  • row:(默认值)水平,从左到右
  • row-reverse:水平,从右到左
  • column:垂直,从上到下
  • column-reverse:垂直,从下到上

justify-content

该属性主要决定项目主轴上的对齐方式,可能值如下:

  • flex-start:(默认值)从主轴起点开始排列
  • flex-end:从主轴终点开始排列
  • center:在主轴上居中排列
  • space-between:项目之间平均分布,项目之间的间隔相等
  • space-around:项目之间的间隔相等,项目两端的间隔为项目之间间隔的一半
  • space-evenly:项目之间和项目两端的间隔相等

align-items

该属性主要决定项目交叉轴上的对齐方式

  • stretch:(默认值)如果项目未设置高度或设置为auto,则将其拉伸以填满容器
  • flex-start:从交叉轴起点开始排列
  • flex-end:从交叉轴终点开始排列
  • center:在交叉轴上居中排列
  • baseline:根据项目的文本基线对齐(适用于包含文本的项目)

flex-wrap

默认情况下,所有项目都按主轴排列为一行,不允许换行,flex-wrap用于决定当一行容不下时,如何换行,可能值有:

  • nowrap:(默认值)所有项目都在一行上排列,不换行
  • wrap:项目在必要时换行,新行在下方
  • wrap-reverse:项目在必要时换行,新行在上方

align-content

该属性用于控制多行项目交叉轴上的对齐方式,只在多行布局有效,即当 flex-wrap 属性设置为 wrapwrap-reverse 时才会生效,其常见可能值为:

  • stretch:(默认值)多行项目在交叉轴上拉伸以填充整个容器的高度
  • flex-start:多行项目在交叉轴的起点对齐
  • flex-end:多行项目在交叉轴的终点对齐
  • center:多行项目在交叉轴上居中对齐
  • space-between:多行项目在交叉轴上均匀分布,首行和末行与容器的起点和终点对齐,行与行之间的间隔相等
  • space-around:多行项目在交叉轴上均匀分布,行与行之间的间隔相等,首行和末行与容器的起点和终点的间隔是间隔的一半

flex-flow

该属性是flex-directionflex-wrap的简写形式,默认值为row nowrap,形式如下:

项目属性

下列属性主要应用于Flex项目

order

该属性定义项目的排列顺序;数值越小,排列越靠前,默认为0

如上图,HTML结构中三个项目按1、2、3顺序书写,但实际渲染则是按order数值从小到大的顺序显示

flex-grow

该属性定义项目的放大比例,接收正整数数值,默认为0,即不放大

容器存在剩余空间时,会将剩余空间设置了flex-grow值的项目按其的比例分配给这些项目

如上图,正常情况下排列,当容器空间富裕时,会有剩余空间,默认不分配(不做处理)

项目2设置了flex-grow值后,容器会将剩余空间分配给项目2

项目3设置了flex-grow值为2后,容器会将剩余空间按1:2的比例分配给项目2项目3

flex-shrink

该属性用于定义项目的缩小比例,默认为1,即如果空间不足,项目将被压缩

如果容器中的项目总宽度超过容器的宽度,那么根据各自的flex-shrink值,项目会以一定的比例进行被压缩

  • 值为 0: 项目不会被压缩,始终保持初始尺寸,即使容器空间不足
  • 正整数值: 项目会根据这个值进行比例收缩

如上图,当项目数量不多时,容器空间有富余,项目正常显示

项目数量较多时,项目宽度按比例被压缩

flex-shrink值设为0后,则项目不会被压缩,依旧按原宽度显示,甚至超出容器

flex-basis

该属性用于设置项目的初始主尺寸(main size),定义了项目在未进行放大或缩小之前,占据的空间大小,值可以是数值(如 px%em 等)或 auto(默认值)

如上图,设置项目3flex-basis值为50%,在容器空间富余情况下,项目3占据容器50%的空间

flex

该属性是flex-growflex-shrinkflex-basis的简写,默认值为0 1 auto;后两个属性可选(即只设置一个值时,其为flex-grow属性的值)

其形式如下:

align-self

该属性用于设置单个项目使用与其他项目不一样的对齐方式(在交叉轴上的对齐方式),可覆盖align-items属性

  • auto:(默认值)表示继承容器的align-items属性
  • stretch:项目在交叉轴上拉伸以填充容器
  • flex-start:项目在交叉轴的起点对齐
  • flex-end:项目在交叉轴的终点对齐
  • center:项目在交叉轴上居中对齐
  • baseline:项目在交叉轴上的基线对齐,即项目的文本基线对齐

特点

一维布局: Flex主要应用于单行或单列上的布局,通过设置主轴和交叉轴来控制元素的排列方式

自适应和响应式设计: Flex设计目的之一是帮助开发者创建响应式布局,适应不同尺寸的屏幕和设备,使网页在移动设备和桌面上均能良好显示

顺序控制: 通过order属性可以轻松改变项目的显示顺序,不必改变 HTML 结构,从而更加灵活地管理页面布局

弹性适应: 使用flex-growflex-shrink属性可以控制项目在空间不足或有多余空间时的弹性表现

对齐和分布控制: 通过justify-contentalign-items可以精确控制元素在主轴和交叉轴上的对齐方式,如居中、靠边、分布等

使用场景

Flex适用于许多不同的场景和布局需求,特别是对于那些需要灵活性和响应式设计的项目,以下列举一些典型的使用场景:

  • 导航菜单和工具栏: 使用Flex可以轻松实现水平或垂直导航菜单,项目的自动对齐和间距控制使得设计更加简洁和一致
  • 网页布局的各种部分: 无论是页头、页脚还是内容区域,Flexbox都能提供灵活的布局控制,适应不同尺寸的屏幕和设备
  • 卡片式布局: 需要展示多个卡片或面板并希望它们在同一行或列上均匀分布时,Flexbox提供了理想的解决方案
  • 响应式设计: 由于Flex的自适应性,特别适合构建响应式设计的布局,使得网页能够在不同尺寸和设备上都有良好的显示效果
  • 表单布局: 在表单设计中,Flex可以帮助将表单元素对齐并有效地利用空间,提升用户体验和操作效率
  • 页面组件的排列: 如页眉、页脚、侧边栏等页面组件的布局,Flex可以使得这些组件在各种屏幕尺寸下都能优雅地展示和布局
  • 垂直居中: 使用Flex可以轻易地实现垂直居中的效果

总体来说,Flex是一种功能强大且易于使用的布局模型,适用于不同的设计和开发场景,在现代化的项目构建中,多用Flex布局,能够显著简化布局的实现和维护工作



相关推荐

2023年最新微信小程序抓包教程(微信小程序 抓包)

声明:本公众号大部分文章来自作者日常学习笔记,部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载,请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...

测试人员必看的软件测试面试文档(软件测试面试怎么说)

前言又到了毕业季,我们将会迎来许多需要面试的小伙伴,在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中,隐藏着的...

复活,视频号一键下载,有手就会,长期更新(2023-12-21)

视频号下载的话题,也算是流量密码了。但也是比较麻烦的问题,频频失效不说,使用方法也难以入手。今天,奶酪就来讲讲视频号下载的新方案,更关键的是,它们有手就会有用,最后一个方法万能。实测2023-12-...

新款HTTP代理抓包工具Proxyman(界面美观、功能强大)

不论是普通的前后端开发人员,还是做爬虫、逆向的爬虫工程师和安全逆向工程,必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具,脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...

使用Charles工具对手机进行HTTPS抓包

本次用到的工具:Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles,今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解,网上有很多fidd...

苹果手机下载 TikTok 旧版本安装包教程

目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本,而AppStore是高于21.1.0版本,本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...

【0基础学爬虫】爬虫基础之抓包工具的使用

大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章,为实现从易到难全方位覆盖,特设【0基础学爬...

防止应用调试分析IP被扫描加固实战教程

防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代,应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中,保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...

一文了解 Telerik Test Studio 测试神器

1.简介TelerikTestStudio(以下称TestStudio)是一个易于使用的自动化测试工具,可用于Web、WPF应用的界面功能测试,也可以用于API测试,以及负载和性能测试。Te...

HLS实战之Wireshark抓包分析(wireshark抓包总结)

0.引言Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接...

信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )

HTTPS协议详解(加密方式、证书原理、中间人攻击)HTTPS协议的加密方式有哪些?HTTPS证书的原理是什么?如何防止中间人攻击?一:HTTPS基本介绍:1.HTTPS是什么:HTTPS也是一个...

Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口

使用Fiddler抓取移动应用程序(APP)的数据接口需要进行以下步骤:首先,确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具,并打开它。将手机的代理设置为Fiddler代理。具体方...

python爬虫教程:教你通过 Fiddler 进行手机抓包

今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢?我们经常在用的手机手机里面的数据怎么对它抓包呢?那么...接下来就是学习python的正确姿势我们要用到一款强...

Fiddler入门教程全家桶,建议收藏

学习Fiddler工具之前,我们先了解一下Fiddler工具的特点,Fiddler能做什么?如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...

fiddler如何抓取https请求实现手机抓包(100%成功解决)

一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议,默认端口:443(2)HTTP协议(HyperTextTransferProtocol):超文本传输协议。默认...