CSS实现前端布局更巧妙的方案！在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

在前端开发中，实现水平垂直居中一直是个热门话题。随着 CSS Flexbox 布局的普及，开发者们开始更多地使用 justify-content 和 align-items 这两个属性来解决这个问题。

然而，还有一种更加简洁、灵活的方式——使用 margin: auto; 来实现居中以及更多实际场景下的特定效果。让我们一起回顾一下常见方式：justify-content 和 align-items，然后再来探讨一下使用：margin 的优势，以及如何在实际项目中使用它。

一、常见方式：justify-content 和 align-items

1.1 justify-content （用于水平对齐）

justify-content 决定主轴（通常是水平方向）上子元素如何分配空间。常见的取值有：

  • flex-start：元素排列在容器的起始位置（默认值）。
  • flex-end：元素排列在容器的末尾。
  • center：元素在容器内水平居中。
  • space-between：第一个元素与容器起点对齐，最后一个元素与容器终点对齐，其他元素之间均匀分布空间。
  • space-around：每个元素左右两侧都分配均等的空白区域（元素两边的空隙会有一半分布在两端）。
  • space-evenly：所有元素之间、以及与容器两端的空隙都相等。

1.2 align-items（用于垂直对齐）

align-items 决定交叉轴（通常是垂直方向）上子元素如何对齐。常见的取值有：

  • stretch：子元素在交叉轴上填满整个容器高度（默认值，前提是子元素没有设置具体的高度）。
  • flex-start：子元素在交叉轴的起始位置对齐。
  • flex-end：子元素在交叉轴的末端对齐。
  • center：子元素在交叉轴上垂直居中对齐。
  • baseline：子元素以其文本基线对齐。

1.3 flexbox 的常见用法

下面给出一些常见的 flexbox 的使用案例：

示例 : 公共样式

.container {
    width: 800px;
    height: 200px;
    margin: 50px auto;
    display: flex;
    border: 1px solid black;
    padding: 10px;
    box-sizing: border-box;
}

.box {
    width: 50px;
    height: 50px;
    background-color: lightblue;
    text-align: center;
    line-height: 50px;
    border: 1px solid #333;
}

示例 1: 水平居中 + 垂直居中

<div class="container example-1">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

.example-1 {
    justify-content: center;
    align-items: center;
}

在这里插入图片描述

如上图所示，元素在水平和垂直方向都居中了。

示例 2: 水平居中 + 垂直靠顶

<div class="container example-2">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

.example-2 {
    justify-content: center;
    align-items: flex-start;
}

在这里插入图片描述

如上图所示，justify-content: center; 使元素在水平方向居中；align-items: flex-start; 使元素垂直方向靠近顶部。

示例 3: 水平等间距 + 垂直居中

<div class="container example-3">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

.example-3 {
    justify-content: space-between;
    align-items: center;
}

在这里插入图片描述

如上图所示，justify-content: space-between; 使元素在垂直方向居中；align-items: center; 使元素在水平方向两端对齐。

示例 4: 水平左对齐 + 垂直底部对齐

<div class="container example-4">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

.example-4 {
    justify-content: flex-start;
    align-items: flex-end;
}

在这里插入图片描述

如上图所示，justify-content: flex-start; 使元素在水平方向居左；align-items: flex-end; 使元素在垂直方向靠底。

示例 5: 水平等间距 + 垂直拉伸

<div class="container example-5">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

.example-5 {
    height: auto;
    justify-content: space-evenly;
    align-items: stretch;
}

在这里插入图片描述

如上图所示，justify-content: space-evenly; 会使元素会在水平方向等间距；如果不设置元素的高度，使其自适应，align-items: stretch; 会使其垂直方向拉伸铺满。

1.4 思考与延伸

但你有没有想过，这些写法是否是最简洁的？能否实现我们日常开发的需求呢？有没有更优雅、更轻量的方案呢？

实际上在很多情况下这两个属性并不能够满足我们的开发需求。

比如我需要实现子元素部分集中的布局：

单纯依靠 justify-content 和 align-items，很难让几个子元素集中在一起。比如我们希望某些元素靠近并且与其他元素保持一定的间距就会比较麻烦了。

此时为了实现这种布局，通常需要结合 flex-grow、margin 或者 space-between，甚至需要使用嵌套的 flex 布局，增加了复杂性。

在这里插入图片描述

又或者是等宽子项的平均分布问题：

比如在导航菜单或展示商品卡片时，可能要求子项无论数量多少，都要从左向右均匀分布，并且保持等宽。

通过 justify-content: space-between 或 space-around 可以部分解决这个问题，但是往往会出现无法保证元素从左向右，或者是无法等分的问题。

在这里插入图片描述

以及一些其他的情况，如垂直排列的固定间距、复杂的网格布局、混合布局等，justify-content 和 align-items都无法简洁、优雅的解决问题。

二、更优雅的方式：margin

2.1 下使用 margin: auto 使元素居中

其实，Flexbox 布局下还有另一种更加简洁的方法使元素居中——直接使用 margin: auto;。你可能会问，这怎么能居中呢？让我们先看一个例子：

<div class="box">
	<div class="item"></div>
</div>

.box {
    width: 200px;
    height: 100px;
    border: 2px solid #ccc;
    display: flex; /* 启用 Flex 布局 */
    margin: 100px auto;
}

.item {
    background: red;
    width: 50px;
    height: 50px;
    margin: auto; /* 自动分配外边距 */
}

在这里插入图片描述

在这个例子中，我们没有使用 justify-content 和 align-items，仅通过设置 .item 元素的 margin: auto;，就实现了水平和垂直居中。

它的工作原理是：在 Flexbox 布局中，margin: auto; 会根据父容器的剩余空间自动调整元素的外边距，直到子元素居中。

在传统布局中，margin: auto; 主要用于水平居中对齐，不适用于垂直居中。因为普通流布局的垂直方向是由文档流控制的，不支持类似 Flexbox 中的自动调整行为。

.container {
    width: 500px;
}

.element {
    width: 200px;
    margin: 0 auto; /* 左右外边距自动分配，实现水平居中 */
}

相比之下，在 Flexbox 布局中，margin: auto; 具有更多的灵活性，可以同时实现水平和垂直居中对齐。

它不仅可以处理水平居中，还可以在 Flexbox 布局下根据剩余空间自动调整外边距，实现完全的居中对齐。

2.2 实现更多实际开发中的布局

示例 1：实现子元素部分集中

在实际开发中，我们常遇到这样一种需求：将元素水平分布在容器内，其中某些元素需要靠近在一起，与其他元素保持一定的自适应距离。

在这种情况下使用 justify-content: space-between 是一种常见的办法，但这种方法也有一定的局限性：每个元素之间平等分配剩余空间，无法实现特定元素之间紧密靠拢。

在这里插入图片描述

代码实现：

<div class="container c2">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 500px;
    background: #eee;
    margin: 50px auto;
    padding: 10px;
    display: flex;
}

.item {
    width: 50px;
    height: 50px;
    border: 1px solid #333;
    box-sizing: border-box;
}

.item:nth-child(odd) {
    background: #046f4e;
}

.item:nth-child(even) {
    background: #d53b3b;
}

.c2 .item:nth-child(2){
    margin: 0 0 0 auto; /* 第二个 item 右对齐 */
}

.c2 .item:nth-child(4){
    margin: 0 auto 0 0; /* 第四个 item 左对齐 */
}

在上述代码中，其实除掉一些基本样式的设置，实现了这个布局的关键代码就2行。

具体来说，.c2 .item:nth-child(2) 的 margin: 0 0 0 auto; 使得第二个 .item 紧贴容器的右边缘，而 .c2 .item:nth-child(4) 的 margin: 0 auto 0 0; 使得第四个 .item 紧贴容器的左边缘。这样就使第二个元素的左侧和第四个元素的右侧将会自适应边距间隔。

因此，我们可以使用 margin 巧妙地通过调整子元素的外边距，实现元素的部分集中和对齐布局。

示例 2：实现等宽子项的平均分布

在很多情况下，我们需要将商品卡片或其他内容等宽地分布在每一行中，使每个子项都具有相同的宽度并且平均分布，每一行都是从左到右。

这种布局通常用于网格展示或商品列表等场景，确保每个子项在视觉上统一且整齐。

在这种情况下直接使用 justify-content 和 align-items 可能会出现以下问题：

  1. 使用 space-between 时如果最后一行的元素数量不足以填满整行，剩余的元素会分散到两侧，留出较大的空白区域，导致布局不整齐。
    在这里插入图片描述
  2. 使用 space-around 时如果最后一行的元素数量不满，元素会在行中均匀分布，导致它们集中在中间，而不是靠左或对齐其他行。
    在这里插入图片描述
    大家在遇到这些情况时是不是就在考虑换用 grid 布局了呢？先别急，我们其实直接通过 margin 就可以直接实现的！

在这里我们可以使用 margin 的动态计算来实现等宽子项的平均分布。

代码实现：

<div class="container c3">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 500px;
    background: #eee;
    margin: 50px auto;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 50px;
    height: 50px;
    border: 1px solid #333;
    box-sizing: border-box;
}

.item:nth-child(odd) {
    background: #046f4e;
}

.item:nth-child(even) {
    background: #d53b3b;
}

.c3 .item {
    --n: 5; /* 每行显示的子项数量 */
    --item-width: 50px; /* 子项宽度 */
    --space: calc(100% / var(--n) - var(--item-width)); /* 计算子项之间的间距 */
    --m: calc(var(--space) / 2); /* 左右间距的一半 */
    margin: 10px var(--m); /* 动态计算左右的间距 */
}

在在上述代码中，除掉基础的样式，实现了这个布局的关键代码仅仅5行。通过动态计算 margin，我们能够简单而有效地实现等宽子项的平均分布，使布局更加简洁明了。

在这里插入图片描述

三、总结

在前端开发中，实现各种页面布局一直是一个常见的需求。

传统的做法如使用 justify-content 和 align-items 属性已经被广泛采用，但这种方法有时可能显得不够简洁或灵活。

在适当的情况下直接使用 margin 进行布局是一种更优雅、简洁的替代方案，可以在 Flexbox 布局中有效地实现居中对齐和一些复杂的布局需求。掌握并运用这种方法，可以提高开发效率，并使布局更加优雅。快来玩起来吧！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Grafana面板-linux主机详情（使用标签过滤主机监控）

Grafana面板-linux主机详情（使用标签过滤主机监控）

1. 采集器添加labels标签区分业务项目 targets添加labels &#xff08;模板中使用的project标签&#xff09; … targets: [‘xxxx:9100’] labels: project: app2targets: [‘xxxx:9100’] labels: project: app1 … 2. grafana面板套用 21902 模板 演示
阅读更多...
UE5 阴影通道

UE5 阴影通道

Shadow Pass Switch节点中 Default代表模型遮罩的效果 Shadow代表阴影的生成遮罩效果
阅读更多...
3. 进阶指南：自定义 Prompt 提升大模型解题能力

3. 进阶指南：自定义 Prompt 提升大模型解题能力

怎么判断 Prompt 的好坏&#xff0c;有什么问题有着标准答案么&#xff1f; 答&#xff1a;让大模型求解数学问题。 李宏毅老师的 HW4 正好提到了有关数学问题的 Prompt&#xff0c;所以我决定中间插一篇这样的文章。通过本文你将&#xff1a; 了解各种 Prompt 如何影响大型语言…
阅读更多...
从C语言过渡到C++

从C语言过渡到C++

&#x1f4d4;个人主页&#x1f4da;&#xff1a;秋邱-CSDN博客☀️专属专栏✨&#xff1a;C &#x1f3c5;往期回顾&#x1f3c6;&#xff1a;单链表实现&#xff1a;从理论到代码-CSDN博客&#x1f31f;其他专栏&#x1f31f;&#xff1a;C语言_秋邱的博客-CSDN博客 目录 ​…
阅读更多...
HOT 100（七）栈、堆、贪心算法

HOT 100（七）栈、堆、贪心算法

一、栈 1、每日温度 使用单调递减栈来解决。主要思路是遍历temperatures数组&#xff0c;利用栈来存储还没有找到比当前温度高的天数的索引。当遇到比栈顶索引所对应温度更高的温度时&#xff0c;就可以确定当前这一天的温度比之前那一天高。索引的差值就是等待的天数。 求一…
阅读更多...
Golang数据流处理：掌握Reader和Writer接口的技巧

Golang数据流处理：掌握Reader和Writer接口的技巧

Golang数据流处理&#xff1a;掌握Reader和Writer接口的技巧 引言理解Reader和Writer接口Reader接口的定义和基本方法Writer接口的定义和基本方法 Reader接口的深入探讨Reader接口的实现示例使用io.Reader读取文件内容从网络连接中读取数据 常用Reader类型及其应用场景strings.…
阅读更多...
相图的科学应用，陶瓷材料创新

相图的科学应用，陶瓷材料创新

陶瓷材料因其优异的物理和化学性能&#xff0c;在航空航天、电子、生物医学等多个领域展现出广阔的应用前景。陶瓷材料的性能很大程度上取决于其微观结构&#xff0c;包括晶粒大小、相组成和分布。相图作为描述陶瓷材料在不同条件下的相变行为和相平衡关系的图表反映了陶瓷材料…
阅读更多...
10年Python程序员教你多平台采集10万+电商数据【附实例】

10年Python程序员教你多平台采集10万+电商数据【附实例】

10万级电商数据采集需要注意什么&#xff1f; 在进行10万级电商数据采集时&#xff0c;有许多关键因素需要注意&#xff1a; 1. 采集平台覆盖&#xff1a;确保可以覆盖主流的电商平台&#xff0c;如淘宝、天猫、京东、拼多多等。 2. 数据字段覆盖&#xff1a;检查是否可以对平…
阅读更多...
什么是VHDX文件？

什么是VHDX文件？

VHDX文件是Docker环境中使用的一种虚拟硬盘文件格式&#xff0c;专门用于存储Docker容器 的镜像和数据。这种文件格式&#xff0c;VHDX&#xff0c;代表Virtual Hard Disk Extended&#xff0c;是一种用于虚拟化环境的硬盘文件格式&#xff0c;支持动态扩展、快照、加密等功能&…
阅读更多...
python基础知识 （五）--容器、索引、切片、字符串的遍历、查找、修改元素

python基础知识 （五）--容器、索引、切片、字符串的遍历、查找、修改元素

目录 容器 容器大总结 索引 切片 字符串的遍历 for循环语法&#xff1a; while循环语法&#xff1a; 查找元素 修改元素 例题 1.验证码 2.抽取大红包 3.a和b互换位置 容器 在Python中&#xff0c;常见容器有&#xff1a; &#xff08;1&#xff09;字符串&#x…
阅读更多...
C++：类和对象全解

C++：类和对象全解

C&#xff1a;类和对象全解 一、类的定义和初始化&#xff08;一&#xff09;类的定义1、类的成员变量&#xff08;1&#xff09;成员变量&#xff08;2&#xff09;成员函数 2、实例化对象&#xff08;1&#xff09;采用普通构造函数&#xff08;2&#xff09;采用初始化列表 …
阅读更多...
数据可视化与分析：数据时代的关键工具

数据可视化与分析：数据时代的关键工具

一、引言 数据可视化与分析是大数据时代中最为重要的技术之一。随着数据量的不断增加&#xff0c;如何有效地理解、解释和利用数据&#xff0c;已经成为各行各业面临的关键挑战。数据可视化通过图表、图形和互动界面将数据以直观的方式呈现&#xff0c;帮助用户快速识别数据中…
阅读更多...
SMA2:代码实现详解——Image Encoder篇（Hiera章）

SMA2:代码实现详解——Image Encoder篇（Hiera章）

SMA2:代码实现详解——Image Encoder篇&#xff08;Hiera&#xff09; 写在前面 大家在SMA2:代码实现详解——Image Encoder篇&#xff08;FpnNeck&#xff09;下的留言我已收到&#xff0c;感谢大家的支持&#xff0c;后面如果遇到比较难以讲清的部分可能会使用视频的形式。…
阅读更多...
Python 课程9-資料庫操作

Python 课程9-資料庫操作

前言 在现代软件开发中&#xff0c;数据库是核心组件之一&#xff0c;它负责数据的存储、管理和检索。无论是简单的应用程序还是复杂的企业级系统&#xff0c;数据库操作都是必不可少的。本教程将深入讲解如何使用 Python 进行数据库操作&#xff0c;涵盖使用 sqlite3 进行本地…
阅读更多...
OpenHarmony（鸿蒙南向开发）——轻量系统STM32F407芯片移植案例

OpenHarmony（鸿蒙南向开发）——轻量系统STM32F407芯片移植案例

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ OpenHarmony&#xff08;鸿蒙南向开发&#xff09;——轻量和小型系统三方库移植指南…
阅读更多...
Android SystemUI组件（06）导航栏创建分析虚拟按键

Android SystemUI组件（06）导航栏创建分析虚拟按键

该系列文章总纲链接&#xff1a;专题分纲目录 Android SystemUI组件 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节持续迭代之前章节的思维导图&#xff0c;主要关注左侧SystemBars分析中导航栏部分即可。 1 导航栏创建之makeStatusBarView 通过上一篇文章的…
阅读更多...
代理IP设置后IP不变？可能的原因及解决方法

代理IP设置后IP不变？可能的原因及解决方法

在使用代理IP时&#xff0c;有时会遇到代理设置后IP地址却没有变化的情况。这种问题可能会让人感到困惑&#xff0c;但其实背后有多种原因。本文将详细探讨这些原因&#xff0c;并提供相应的解决方法&#xff0c;帮助你顺利解决问题。 可能的原因 代理IP设置后IP地址不变的原…
阅读更多...
Spring的核心思想

Spring的核心思想

目录 一、Spring要解决的问题 二、Spring的核心结构 三、核心思想 3.1.1 什么是IOC 3.1.2 IOC解决的问题&#xff1a;耦合 3.1.3 IOC和DI的区别 3.2.1 什么是AOP 3.2.2 AOP解决的问题&#xff1a;耦合 3.2.3 为什么叫做面向切面编程 一、Spring要解决的问题 问题1&am…
阅读更多...
maya-vray渲染蒙版

maya-vray渲染蒙版

要用一个叫vrayMulWrapper的材质球&#xff0c;把alpha Conterbution调到-1&#xff0c;勾选matte surface启用蒙版物体。
阅读更多...
爬虫逆向学习(六)：补环境过某数四代

爬虫逆向学习(六)：补环境过某数四代

声明&#xff1a;本篇文章内容是整理并分享在学习网上各位大佬的优秀知识后的实战与踩坑记录 引用博客&#xff1a; https://blog.csdn.net/shayuchaor/article/details/103629294 https://blog.csdn.net/qq_36291294/article/details/128600583 https://blog.csdn.net/weixin_…
阅读更多...
最新文章

Copyright @ 2022~2023