常见前端布局技巧(一)

投稿用户 • • 电商技巧 • 阅读 78

随着Web技术不断的革新，CSS近几年也变得多年前要更强大。其中有一些CSS的属性可以让开发者能节约更多的时间。比如说，在Web布局中，现代CSS特性就可以更好的帮助我们快速实现，例如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等。在本文中，会介绍一些不同的CSS属性来实现这些效果，希望对大家今后的工作有所帮助。水平垂直居中css垂直居中，可以说是面试题中的经典，在多年以前是一个棘手的问题。但随着 Flex布局模块 和 Grid布局模块 的到来，可以说实现水平垂直居中已是非常的容易。Flex中实现水平垂直居中在Flex布局模块中，不管是单行还是多行，要让它们在容器中水平垂直居中都是件易事，而且方法也有多种。最常见的是在Flex容器上设置对齐方式，在Flex项目上设置margin:auto。先来看在Flex容器上设置对齐方式。Flex容器和Flex项目上设置对齐方式 我们可以在Flex容器上设置justify-content、align-items的值为center时，可以让元素在Flex容器中达到水平垂直居中的效果。来看一个示例：

/* CSS */
.flex__container {
display: flex;
justify-content: center;
align-items: center;
}效果如下:codepen查看 这种方式，特别适应于让Icon图标在容器中水平垂直居中，不同的是在Icon图标容器上显示设置 display: inline-flex。比如下面这个示例：

/* CSS */
.flex__container {
display: inline-flex;
align-items: center;
justify-content: center;
}效果如下:codepen查看 在这种模式之下，如果要让多个元素实现水平垂直居中的效果，那还需要加上flex-direction: column，比如：

🙂

/* CSS */
.flex__container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}效果如下:codepen查看 在Flexbox布局中，还可以像下面这样让Flex项目在Flex容器中达到水平垂直居中的效果：

/* CSS */
.flex__container {
display: flex; // 或inline-flex
justify-content: center;
}

.flex__item {
align-self: center;
}效果如下:如果在Flex容器中有多个Flex项目时，该方法同样有效：.flex__container {
display: flex; // 或inline-flex
justify-content: center;
}

.flex__container > * {
align-self: center;
}除此之外，还可以使用place-content: center让Flex项目实现水平垂直居中：.flex__container {
display: flex;
place-content: center;
}

.flex__item {
align-self: center;
}效果如下:codepen查看 或者换：.flex__container {
display: flex;
place-content: center;
place-items: center;
}这两种方式同样适用于Flex容器中有多个Flex项目的情景：.flex__container {
display: flex;
flex-direction: column;
place-content: center;
}

.flex__container > * {
align-self: center;
}

// 或者

.flex__container {
display: flex;
flex-direction: column;
place-content: center;
place-items: center;
}效果如下:codepen查看 可能很多同学对于 place-content 和 place-items 会感到陌生。其实 place-content 是 align-content 和justify-content 的简写属性；而 place-items 是 align-items 和 justify-items 的简写属性。即：.flex__container {
place-content: center;
place-items: center;
}等效于：.flex__container {
align-content: center;
justify-content: center;

align-items: center;
justify-items: center;
}虽然扩展出来有四个属性，但最终等效于：.flex__container {
display: flex;
align-items: center;
justify-content: center;
}

// 多行
.flex__container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}Grid中实现水平垂直居中CSS Grid布局可以说是现代Web布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。在CSS Grid布局中，只需要仅仅的几行代码也可以快速的帮助我们实现水平垂直居中的效果。比如下面这个示例:

/* CSS */
.grid {
display: grid; // 或 inline-grid
place-items: center
}codepen查看 在CSS Grid布局模块中，只要显式设置了display: grid（或inline-grid）就会创建Grid容器和Grid项目，也会自动生成网格线，即行和列（默认为一行一列）。在没有显式地在Grid容器上设置grid-template-columns和grid-template-rows，浏览器会将Grid容器默认设置为Grid内容大小：这种方法也适用于CSS Grid容器中有多个子元素（Grid项目），比如：

🙂

codepen查看 而且palce-items适用于每个单元格。这意味着它将居中单元格的内容。比如下面这个示例：

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

/* CSS */
.grid__container {
display: grid;
place-items: center;
grid-template-columns: repeat(2, 1fr);
gap: 2vh;
}

.grid__item {
display: grid;
place-items: center;
}codepen查看 等高布局等高布局也是Web中非常常见的一种布局方式，而且实现等高布局的方案也有很多种。这里我们主要来看Flexbox布局模块和Grid布局模块给我们带来了什么样的变化。在Flexbox和Grid布局模块中，让我们实现等高布局已经是非常的简单了，比如：

/* CSS */
.flex__container {
display: flex; // 或 inline-flex
}
简单地说，在容器上显式设置了display的值为 flex 或 inline-flex ，该容器的所有子元素的高度都相等，因为容器的 align-items 的默认值为 stretch 。在Grid布局模块中类似：

/* CSS */
.grid__container {
display: grid;
grid-template-columns: 20vw 1fr 20vw; /* 根据需求调整值*/
}
这个时候你看到的效果如下：等高布局特别适用于卡片组件中：codepen查看 如果需求有所调整，比如在Flex项目 或 Grid项目的子元素高度和容器高度相同。

/* CSS */
.flex__container {
display: flex;
}

.content {
height: 100%
}

// 或
.grid__container {
display: grid;
grid-auto-flow: column;
}

.content {
height: 100%;
}
codepen查看 未完待续…

创业项目群，学习操作 18个小项目，添加 微信：790838556  备注：小项目！

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 zoodoho@qq.com举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.zoodoho.com/119294.html
赞 (0)
投稿用户
0
上一篇 2023年8月13日 am8:24
下一篇 2023年8月13日 pm12:24

相关推荐