Ant Design中Flex布局、Grid布局和Layout布局详解

好的,我们来更详细地探讨 Ant Design 中的 Flex布局Grid布局Layout布局 的特点、用法、适用场景,以及如何灵活运用它们来构建页面。下面将从各个方面进行更深入的分析,并提供具体的实例。


Vue+Flex布局实现响应式布局

1. Flex布局

概念与特点

Flex布局 基于 CSS3 的 Flexbox 模型,允许我们在容器内部灵活地排列元素,支持单轴(水平或垂直)的布局。RowCol 组件结合了 Flexbox 和栅格系统,适合构建简单的对齐和响应式布局。

  • 单轴布局:所有子元素在一个方向(水平或垂直)上排列。
  • 灵活性:元素可以自动调整其大小以适应容器空间。
  • 对齐方式:可以通过 justify-contentalign-items 属性对齐元素。
  • 方向控制:可以设置元素排列的方向,支持从左到右、从右到左、从上到下、从下到上等排列方式。

主要属性

  • justify: 水平对齐方式

    • flex-start: 元素从容器的起始位置开始排列。
    • flex-end: 元素从容器的结束位置开始排列。
    • center: 元素居中排列。
    • space-between: 元素之间有相等的间距。
    • space-around: 元素之间有相等的间距,且第一个和最后一个元素与容器的边缘有间距。
  • align: 垂直对齐方式

    • flex-start: 元素顶部对齐。
    • flex-end: 元素底部对齐。
    • center: 元素垂直居中对齐。
    • baseline: 元素基线对齐。
    • stretch: 元素拉伸以填充容器。

用法示例

import React from 'react';
import { Row, Col } from 'antd';const FlexLayoutExample = () => (<Row justify="space-between" align="middle"><Col span={6}>Column 1</Col><Col span={6}>Column 2</Col><Col span={6}>Column 3</Col></Row>
);export default FlexLayoutExample;
  • Row 使用了 justify="space-between" 来设置水平方向的间距,align="middle" 用于垂直居中对齐。
  • Col 组件通过 span 设置每一列的宽度比例,这里 span={6} 表示每一列占据了12个栅格中的6个。
    在这里插入图片描述在这里插入图片描述

应用场景

  • 简单布局:用于页面中需要简单对齐的部分,例如按钮、卡片、列表等。
  • 响应式布局:通过 Colspan 属性可以设置不同屏幕下的显示效果,配合 xssmmd 等响应式属性可以实现响应式设计。

2. Grid布局

Grid布局详解

概念与特点

Grid布局 是基于 CSS Grid Layout 实现的二维布局,提供了比 Flexbox 更加强大的布局功能。通过定义行和列,开发者可以更精确地控制元素在页面中的位置和大小。Ant Design 的 RowCol 组件也支持栅格系统,可以用来实现响应式的网格布局。

  • 二维布局:可以同时控制行和列,适合复杂的布局需求。
  • 灵活性:开发者可以通过 CSS 的 grid-template-rowsgrid-template-columns 来定义网格行列的数量和大小。
  • 对齐方式:可以通过 justify-itemsalign-items 来控制元素在网格中的对齐方式。
  • 间距控制:使用 gutter 属性来定义网格间的间距。

用法示例

import React from 'react';
import { Row, Col } from 'antd';const GridLayoutExample = () => (<Row gutter={16}><Col span={8}>Column 1</Col><Col span={8}>Column 2</Col><Col span={8}>Column 3</Col></Row>
);export default GridLayoutExample;
  • Rowgutter={16} 表示列之间的间距为 16px。
  • Col 组件通过 span={8} 表示每一列占据12格中的 8 格,也就是说 3 列每列占 1/3 宽度。

在这里插入图片描述
在这里插入图片描述

应用场景

  • 复杂网格布局:适合用来实现具有多个行列的复杂布局,如商品列表、卡片列表等。
  • 响应式设计:使用 Col 的响应式属性,设置不同设备宽度下的布局。

3. Layout布局

概念与特点

Layout布局 组件用于构建网页的基础骨架结构,它是一个容器组件,包含了页面常见的区域如:HeaderSiderContentFooter。Ant Design 的 Layout 组件提供了一个灵活且易用的方式来创建标准的后台管理页面或其他复杂页面布局。

  • 标准化布局:适用于构建带有顶部、侧边栏、内容区和底部的页面框架。
  • 布局灵活:可以自定义每个区域的大小、是否固定、是否可折叠等。
  • 内容区域分离:内容区域 (Content) 与侧边栏 (Sider) 可以灵活调整,通常配合 HeaderFooter 使用。

用法示例

import React from 'react';
import { Layout } from 'antd';const { Header, Sider, Content, Footer } = Layout;const LayoutExample = () => (<Layout style={{ minHeight: '100vh' }}><Header style={{ background: '#001529', color: 'white' }}>Header</Header><Layout><Sider width={200} style={{ background: '#fff' }}>Sider</Sider><Layout style={{ padding: '0 24px 24px' }}><Contentstyle={{padding: 24,margin: 0,minHeight: 280,background: '#fff',}}>Content</Content></Layout></Layout><Footer style={{ textAlign: 'center' }}>Footer</Footer></Layout>
);export default LayoutExample;
  • Header:顶部区域,通常用于放置导航、logo 或其他控制项。
  • Sider:侧边栏,通常用于放置导航菜单,可以设置为固定或可折叠。
  • Content:主要的内容区域,用于展示页面的主要内容。
  • Footer:底部区域,通常用于显示版权、联系方式等信息。
    在这里插入图片描述
    在这里插入图片描述

应用场景

  • 后台管理系统:通常需要具有固定的头部、侧边栏和内容区,这种布局方式非常适合后台系统的基础架构。
  • 企业网站:适合需要顶部导航、侧边栏和主要内容区域的企业或博客类网站。
  • 响应式设计:通过 Sidercollapsed 属性和响应式 HeaderFooter 的配合,可以适应不同设备屏幕。

布局方式总结比较表

布局方式特点应用场景使用的组件响应式灵活性
Flex布局一维布局(横向或纵向),自动调整子元素的位置和大小。适用于简单的一维排版,如水平或垂直对齐的布局。Row, Col支持高:通过justify, align等属性控制布局
Grid布局二维布局,支持行和列的复杂控制。适用于复杂的网格布局,尤其是需要精确控制列和行的间距和排列。Row, Col支持非常高:可以自定义网格的行列布局
Layout布局页面骨架布局,包含Header, Sider, Content, Footer适用于后台系统和需要页面框架布局的应用。Layout, Header, Sider, Content, Footer支持中等:主要用于标准页面框架

总结

  • Flex布局:适合简单的布局需求,尤其是需要一维的排列方式,像按钮组、图片、卡片等。
  • Grid布局:适合复杂的网格布局,能够精确控制各个元素的大小和位置,适

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/66293.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis两种主要的持久化方式是什么?

Redis支持两种主要的持久化方式&#xff0c;它们分别是RDB&#xff08;Redis Database Snapshotting&#xff09;和AOF&#xff08;Append Only File&#xff09;。以下是这两种持久化方式的详细介绍&#xff1a; 一、RDB&#xff08;Redis Database Snapshotting&#xff09; …

flink cdc oceanbase(binlog模式)

接上文&#xff1a;一文说清flink从编码到部署上线 环境&#xff1a;①操作系统&#xff1a;阿里龙蜥 7.9&#xff08;平替CentOS7.9&#xff09;&#xff1b;②CPU&#xff1a;x86&#xff1b;③用户&#xff1a;root。 预研初衷&#xff1a;现在很多项目有国产化的要求&#…

C++文件流 例题

问题&#xff1a; 设计一个留言类&#xff0c;实现以下的功能&#xff1a; 1) 程序第一次运行时&#xff0c;建立一个 message.txt 文本文件&#xff0c;并把用户输入的信息存入该文件&#xff1b; 2) 以后每次运行时&#xff0c;都先读取该文件的内容并显示给用户&#xff…

exoplayer的使用-7,手势优化

之前的手势,虽然勉强实现了效果,但有一些问题. 手按着,会有抖动,这样就不断触发进度亮度这些. 第一次按下,然后拖动,产生的变化太大,严重不符合预期. touch在一个方法里面,从代码的角度看,不便于维护. Gesture手势类都给我们处理好了,双击,点击,滚动这些.所以打算用这个优化…

遮挡半透明效果

1、遮挡半透明效果是什么 在游戏开发中&#xff0c;遮挡半透明效果就是物体被挡住的部分&#xff0c;也能呈现出一种半透明效果而被看到&#xff08;具体效果可以自定义&#xff09;比如 当角色在建筑物之间穿行时&#xff0c;被遮挡部分能够呈现出半透明效果而被我们看到。遮…

大模型高效推理综述

大模型高效推理综述 1 Introduction2 Preliminaries2.1 transformer架构的LLM2.2 大模型推理过程2.3 推理效率分析 3 TAXONOMY(分类)4.数据级别优化4.1输入压缩4.1.1 提示词裁剪&#xff08;prompt pruning&#xff09;4.1.2 提示词总结&#xff08;prompt summary&#xff09;…

计算机网络--UDP和TCP课后习题

【5-05】 试举例说明有些应用程序愿意采用不可靠的UDP, 而不愿意采用可靠的TCP。 解答&#xff1a; 这可能有以下几种情况。 首先&#xff0c;在互联网上传输实时数据的分组时&#xff0c;有可能会出现差错甚至丢失。如果利用 TCP 协议对这些出错或丢失的分组进行重传&…

http://noi.openjudge.cn/_3.9数据结构之C++STL_1806:词典

题目 1806:词典 总时间限制: 3000ms 内存限制: 65536kB 描述 你旅游到了一个国外的城市。那里的人们说的外国语言你不能理解。不过幸运的是&#xff0c;你有一本词典可以帮助你。 输入 首先输入一个词典&#xff0c;词典中包含不超过100000个词条&#xff0c;每个词条占据一行…

深入探索:将 Elasticsearch 与 Ruby 工具结合使用

深入探索&#xff1a;将 Elasticsearch 与 Ruby 工具结合使用 一、背景介绍 1. Elasticsearch 与 Ruby 的结合背景 在现代软件开发中&#xff0c;Elasticsearch 作为一个基于 Lucene 的搜索引擎&#xff0c;以其分布式、可扩展、实时搜索等特点而广受欢迎。Ruby&#xff0c;…

模型分割的联邦微调与专家 MOE结合

基于模型分割的联邦微调 在基于模型分割的联邦微调中,要实现模型分割且不影响大模型整体效果,可从以下方面着手: 依据功能和数据特性分割:分析模型的功能结构以及不同部分对数据的依赖程度。例如,在自然语言处理的大模型中,可将词嵌入层、语法分析层、语义理解层等按功能…

MyBatis 与 MyBatis-Plus 的区别

MyBatis 和 MyBatis-Plus 都是用于简化 Java 应用程序与数据库交互的持久层框架&#xff0c;但它们在功能、易用性和性能优化方面存在显著差异。下面将详细介绍两者之间的区别&#xff0c;并通过具体的代码示例进行对比。 概述 MyBatis&#xff1a;作为一款经典的持久层框架&a…

Go语言的基础知识

1, Go 语言介绍 Go 即 Golang,是 Google公司2009年11月正式对外公开的一门编程语言。 根据 Go 语言开发者自述&#xff0c;近10多年&#xff0c;从单机时代的C语言到现在互联网时代的Java,都没有令人满意的开发语言&#xff0c;而C往往给人的感觉是&#xff0c;花了100%的经历…

【UE5 C++课程系列笔记】20——共享指针的简单使用

目录 概念 创建共享指针示例 重设共享指针 共享指针内容转移 共享指针和共享引用的转换 判断共享指针的相等性 共享指针访问成员函数 自定义删除器 概念 共享指针&#xff08;主要以 TSharedPtr 为例&#xff09;&#xff0c;TSharedPtr 基于引用计数机制来工作&#x…

flux中的缓存

1. cache&#xff0c;onBackpressureBuffer。都是缓存。cache可以将hot流的数据缓存起来。onBackpressureBuffer也是缓存&#xff0c;但是当下游消费者的处理速度比上游生产者慢时&#xff0c;上游生产的数据会被暂时存储在缓冲区中&#xff0c;防止丢失。 2. Flux.range 默认…

Ubuntu网络连接问题(笔记本更换wifi后,虚拟机连不上网络)

1、笔记本更换wifi后&#xff0c;虚拟机的IP地址变了&#xff0c;然后就连不上网络了&#xff08;主机笔记本连接wifi正常上网&#xff09; 2、修改子网地址&#xff08;按照ubutun的ip设置子网掩码&#xff09; 3、Ubuntu已经显示网络连接正常了&#xff0c;但是就是无法上网&…

如何在 Ubuntu 22.04 上安装 Cassandra NoSQL 数据库教程

简介 本教程将向你介绍如何在 Ubuntu 22.04 上安装 Cassandra NoSQL 数据库。 Apache Cassandra 是一个分布式的 NoSQL 数据库&#xff0c;旨在处理跨多个普通服务器的大量数据&#xff0c;并提供高可用性&#xff0c;没有单点故障。Apache Cassandra 是一个高度可扩展的分布…

【开发工具】好用的进程管理工具supervisor

supervisor配置与使用 概述配置文件详解其他高级用法相关文献 概述 Supervisor是一个用Python编写的进程管理工具&#xff0c;主要用于在类Unix系统中管理和监控长时间运行的进程。以下是对它的详细介绍&#xff1a; 一、功能特点 进程监控 Supervisor可以自动启动、停止和重启…

C++编程等级认证学习计划

C编程等级认证学习计划 计划目标 在30天内系统学习并掌握C编程等级认证&#xff08;一至八级&#xff09;的知识点&#xff0c;为参加认证考试做好充分准备。 前期准备 学习资料收集 准备涵盖C编程一至八级知识点的专业教材&#xff0c;如《C Primer》等。收集相关的在线教…

Spring MVC实战指南:构建高效Web应用的架构与技巧(三)

响应数据和结果视图(7种) 返回值分类 创建web.xml&#xff08;spring、过滤器解决乱码、配置控制器dispatcherServlet、加载springmvc.xml文件、配置启动加载&#xff09;创建springmvc.xml文件 <!--配置了内容&#xff0c;启动Tomcat服务器的时候&#xff0c;就会被加载--…

Postgresql中clog与xid对应关系计算方法(速查表)

知道xid计算clog文件名 CREATE or REPLACE PROCEDURE get_clog_name(xid bigint) as $$ DECLAREpageno bigint;segno bigint; BEGIN-- 页面号&#xff1a;一个页面8K&#xff0c;一个字节8位能存4个事务的状态。pageno : xid / (8192 * 4);-- 段号&#xff1a;一个段&#xf…