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

news2024/11/26 2:55:14

在前端开发中，实现水平垂直居中一直是个热门话题。随着 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 布局中有效地实现居中对齐和一些复杂的布局需求。掌握并运用这种方法，可以提高开发效率，并使布局更加优雅。快来玩起来吧！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【北京迅为】《STM32MP157开发板使用手册》- 第二十三章 Cortex-M4 开发环境搭建

【北京迅为】《STM32MP157开发板使用手册》- 第二十三章 Cortex-M4 开发环境搭建

iTOP-STM32MP157开发板采用ST推出的双核cortex-A7单核cortex-M4异构处理器&#xff0c;既可用Linux、又可以用于STM32单片机开发。开发板采用核心板底板结构&#xff0c;主频650M、1G内存、8G存储&#xff0c;核心板采用工业级板对板连接器&#xff0c;高可靠&#xff0c;牢固耐…
阅读更多...
香港科技大学工学院2025/2026年度硕士研究生（MSc）项目招生宣讲会

香港科技大学工学院2025/2026年度硕士研究生（MSc）项目招生宣讲会

&#x1f514;香港科技大学工学院2025/2026年度硕士研究生&#xff08;MSc&#xff09;项目招生宣讲会 &#x1f559;时间&#xff1a;2024年9月24日&#xff08;星期二&#xff09;14:30 &#x1f3e0;地点&#xff1a;香港中文大学&#xff08;深圳&#xff09;图书馆培训室…
阅读更多...
【时序分析】作业汇编

【时序分析】作业汇编

一、基础知识 时间序列分析就是对一个时间序列进行建模&#xff0c;扣除各种趋势项&#xff08;线性趋势、余弦趋势、有色噪声ARIMA&#xff09;&#xff0c;得到一个白噪声序列&#xff1b;换言之&#xff0c;我们要提取其中的有用信息&#xff08;非白噪声序列&#xff09;&…
阅读更多...
Linux 之 RPM [Red - Hat Package Manager]【包管理】

Linux 之 RPM [Red - Hat Package Manager]【包管理】

命令符 -i&#xff08;install&#xff09;&#xff1a;安装软件包。--test&#xff1a;测试安装&#xff0c;并不实际安装&#xff0c;只是检查依赖关系等是否满足安装条件。--nodeps&#xff1a;忽略依赖关系进行安装。不过这种方式可能导致软件因缺少依赖而无法正常运行&am…
阅读更多...
【论文阅读】Face2Diffusion for Fast and Editable Face Personalization

【论文阅读】Face2Diffusion for Fast and Editable Face Personalization

code&#xff1a;mapooon/Face2Diffusion: [CVPR 2024] Face2Diffusion for Fast and Editable Face Personalization https://arxiv.org/abs/2403.05094 (github.com) 论文 介绍 面部个性化旨在将从图像中获取的特定面部插入到预先训练的文本到图像扩散模型中。然而&#…
阅读更多...
linux服务器日常运维开机关机关服务命令

linux服务器日常运维开机关机关服务命令

Linux开机关机命令 Linux服务器开机和关机命令 在Linux系统中&#xff0c;开机和关机通常涉及到几个命令&#xff1a; 开机&#xff1a; reboot - 重新启动正在运行的系统。 shutdown -r now - 立即重启系统。 关机&#xff1a; poweroff - 关闭系统并关闭电源。 shutdo…
阅读更多...
消防摩托车的技术参数_鼎跃安全

消防摩托车的技术参数_鼎跃安全

一、技术概述 动力系统&#xff1a;消防摩托车搭载单缸、四冲程、水冷发动机&#xff0c;功率达 19kW&#xff0c;为车辆在野外复杂地形行驶提供强劲动力。确保能快速穿越山地、林间等区域&#xff0c;及时抵达火灾现场展开救援。 车体技术&#xff1a;采用高品质材料打造&am…
阅读更多...
EA橘子平台Origin离线安装包获取

EA橘子平台Origin离线安装包获取

在EA官网下载的橘子平台安装包安装时我们发现是在线安装&#xff0c;一般的网络环境根本无法完成安装&#xff0c;一直卡在那里&#xff0c;我们可以借助加速器、特殊网络、或者直接获取离线安装包的方法安装&#xff0c;下面是如何获取离线安装包的方法。 打开EA官网&#xf…
阅读更多...
基于微信小程序的宿舍报修系统的设计与实现

基于微信小程序的宿舍报修系统的设计与实现

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于微信小程序JavaSpringBootVueMySQL的宿…
阅读更多...
PPT技巧：如何在幻灯片中生成目录？

PPT技巧：如何在幻灯片中生成目录？

PPT文件如何制作目录&#xff0c;如何点击目录标题立即跳转到相应幻灯片&#xff1f;今天小奥超人和大家一起来学习一下。 现在幻灯片里制作好目录页&#xff0c;制作好目录之后&#xff0c;选中一个目录&#xff0c;点击插入 – 链接 在插入链接界面中&#xff0c;选择【本文…
阅读更多...
xLSTM模型学习笔记

xLSTM模型学习笔记

笔记来源&#xff1a;bilibili LSTM 回顾 原始的 LSTM 是为了解决 RNN 时序反向传播中梯度消失和爆炸问题而提出的。 其所谓的门控机制&#xff0c;其实就是一种时序上的注意力机制&#xff0c;相当于把不同时间进行"掺和"&#xff0c;是对时序信息的一种选择性控制…
阅读更多...
苍穹外卖——day1

苍穹外卖——day1

前后端联调 前端先传给nginx再传给后端服务器 反向代理 我们可以看到前端和后端的访问地址不一样&#xff0c;那么怎么实现进行访问的呢&#xff1f; 我们是通过一种反向代理技术来实现的 利用nginx反向代理来实现前后端联调 下面是如何在我们的idea项目中使用nginx反向代理…
阅读更多...
HCIA--实验十四：二层链路聚合

HCIA--实验十四：二层链路聚合

一、实验内容 1.需求/要求 用两台S5700交换机做链路聚合。 二、实验过程 1.拓扑图&#xff1a; 2.步骤&#xff1a; 1.配置交换机SW1 int Eth-Trunk 1 创建链路聚合组 mode lacp-static 配置LACP模式 trunkport GigabitEthernet 0/0/10把接口0/0/10加入聚合组 trunkpo…
阅读更多...
如何快速提升指定关键词排名到Google首页？

如何快速提升指定关键词排名到Google首页？

如果你是一个新网站&#xff0c;那么就没有任何捷径&#xff0c;老老实实一步步优化正路&#xff0c;当然&#xff0c;你的资源特别多的情况下&#xff0c;也并非不可能&#xff0c;但这点很多人都很难满足&#xff0c;所以要想快速把指定关键词的排名推到Google首页&#xff0…
阅读更多...
LCS—最长公共子序列

LCS—最长公共子序列

最长公共子序列问题就是求出两个字符串的LCS长度&#xff0c;是一道非常经典的面试题目&#xff0c;因为它的解法是典型的二维动态规划。 比如输入 str1 "babcde", str2 "acbe"&#xff0c;算法应该输出3&#xff0c;因为 str1 和 str2 的最长公共子序列…
阅读更多...
如何构建大数据治理平台，助力企业数据决策

如何构建大数据治理平台，助力企业数据决策

建设背景 &#xff08;1&#xff09;什么是数据资产 资产由企业及组织拥有和控制&#xff0c;能够提供增值服务、带来经济利益的重要资源。 资产不但需要管理&#xff0c; 更需要运营。 &#xff08;2&#xff09;数据资产运营中的问题 数据资产运营中存在的问题主要包括以下…
阅读更多...
【游戏杂谈】关于靠谱及不靠谱的游戏立项方式探讨

【游戏杂谈】关于靠谱及不靠谱的游戏立项方式探讨

其他好内容推荐&#xff1a; 游戏二次创意算抄袭&#xff1f; - 游戏干饭之家 格斗游戏&#xff1a;一个伟大而古老的游戏类型 - 游戏干饭之家 游戏行业研究生和有两三年工作本科生谁更香&#xff1f; - 游戏干饭之家 立项一直是大部分公司和个人的难点&#xff0c;关于靠谱…
阅读更多...
【MySQL】了解并操作MySQL的缓存配置与信息

【MySQL】了解并操作MySQL的缓存配置与信息

目录 一、查看缓存配置 二、查看缓存信息 查询MySQL的缓存相关信息&#xff0c;一般我们用两个命令&#xff1a; show variables like %query_cache%; show status like %qcache%; 一、查看缓存配置 查看缓存配置的相关的系统变量变量&#xff0c;返回给我们服务器缓存的配置…
阅读更多...
2024年危险化学品生产单位安全生产管理人员证考试题库及危险化学品生产单位安全生产管理人员试题解析

2024年危险化学品生产单位安全生产管理人员证考试题库及危险化学品生产单位安全生产管理人员试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年危险化学品生产单位安全生产管理人员证考试题库及危险化学品生产单位安全生产管理人员试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&a…
阅读更多...
cgdb对应vs中的调试代码——Linux代码调试

cgdb对应vs中的调试代码——Linux代码调试

目录 打断点和删除断点&#xff1a; 删除断点&#xff1a; 运行代码&#xff1a;​编辑 监视&#xff1a; 补充&#xff1a;​编辑 对于程序员来说调试代码是个非常重要的工具&#xff0c;bug和调试类比孙悟空和如来&#xff0c;当我们打不过bug时就只能成为孙悟空口中的玉…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023