当前位置：首页 > 科技 > 软件

CSS align-content也能适用于普通容器了

来源：责编：时间：2024-04-22 17:18:34 101观看

导读最近，Chrome 123又悄悄推出了一个CSS新特性，那就是align-content支持普通的block容器了！那么，这个特性有什么用呢？一起来了解一下吧！一、过去只对 flex 和 grid 生效align-content相信大家都听说过，但是之前只能在 flex 和 g

最近，Chrome 123又悄悄推出了一个CSS新特性，那就是align-content支持普通的block容器了！那么，这个特性有什么用呢？一起来了解一下吧！

一、过去只对 flex 和 grid 生效

align-content相信大家都听说过，但是之前只能在 flex 和 grid容器上才能生效。这里以flex为例，比如有这样一个布局。

<div class="flex">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div></div>

简单修饰一下。

.flex{  display: flex;  width: 400px;  height: 300px;  outline: 1px dashed #9747FF;  align-content: center;}.item{  display: inline-flex;  width: 80px;  margin: 10px;  aspect-ratio: 1/1;  background: #FFE8A3;  color: #333;  font-size: 30px;  border-radius: 10px;  align-items: center;  justify-content: center;}

效果如下：

图片

好像没生效？这是因为align-content针对的是多行，控制台其实已经有提示了。

图片

所以，这里需要加上换行属性。

.flex{  /**/  display: flex;  flex-wrap: wrap;  align-content: center;}

这样就生效了。

图片

有人可能会想到align-items:center，可能大部分情况我们都是用的这个属性来实现垂直居中，有什么区别呢？这里不妨来试试。

.flex{  /**/  display: flex;  flex-wrap: wrap;  /*align-content: center;*/  align-items:center}

效果如下：

图片

好像看不出有什么是居中的？这是因为``align-items`针对的是单行的，我们让每个元素的高度不一致就能看出来了。

图片

为啥两行的间距这么大呢？这是因为align-content默认是stretch，会自动充满整个空间，如果设置成``align-content:end`就能看出效果了。

图片

简单总结一下：

align-items 设置每一行的对齐方式
align-content 设置多行整体的对齐方式

图片

具体的很多细节，网上有很多教程，大家可以自己去查阅，这里就不多介绍了。

二、普通块级元素的 align-content 的特性

这里说的块级元素其实指的是除inline元素之外的元素，大家可以在控制台查看。

图片

有了这个特性，垂直居中将变得异常简单，比如：

<div class="con">欢迎关注前端侦探</div>

设置align-content:center：

.con{  border-radius: 4px;  padding: 10px;  width: 100px;  height: 100px;  background: #FFD75A;  align-content: center;}

效果如下：

图片

如果是多行块级文本：

<ol class="con">  <li>欢迎</li>  <li>关注</li></ol>

也能完美垂直居中。

图片

当然这些用flex布局也能实现，只是稍微麻烦一点。

三、textarea 也能实现垂直居中

最近在项目中碰到这样一个需求，需要在输入多行文本时，默认是居中的，超出后才正常滚动。

图片

难点就在于垂直居中，因为textarea是可替换元素，即使设置 flex也无法实现内部文本垂直居中，现在有了align-content就好办了，如下：

textarea{  align-content: center;}

效果如下：

图片

以上所有 demo 可以查看以下链接（Chrome 123+）：

CSS align-content (juejin.cn)[1]
CSS align-content (codepen.io)[2]

四、总结一下

一个比较不错的新特性，你学到了吗？下面总结一下：

align-content 之前只在 flex 和 grid 容器中生效
align-items 用于设置每一行的对齐方式
align-content 用于设置多行整体的对齐方式
现在普通块级元素也支持 align-content 特性了，可以非常方便实现垂直居中效果
align-content 还支持textarea文本输入垂直居中

参考资料：

[1]CSS align-content (juejin.cn)： https://code.juejin.cn/pen/7360209107388727306

[2]CSS align-content (codepen.io)： https://codepen.io/xboxyan/pen/gOyQqwZ

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-84590-0.htmlCSS align-content也能适用于普通容器了

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： React状态管理专题：什么是Redux

下一篇： Go 最大挑战、AI 方向、内部优先级？2024 H1 开发者报告发布

标签：

热门焦点

7月安卓手机性价比榜：努比亚+红魔两款新机入榜

7月登场的新机有努比亚Z50S Pro和红魔8S Pro，除了三星之外目前唯二的两款搭载超频版骁龙8Gen2处理器的产品，而且努比亚和红魔也一贯有着不错的性价比，所以在本次的性价比榜单
一加首款折叠屏！一加Open渲染图出炉：罕见单手可握小尺寸

8月5日消息，此前就有爆料称，一加首款折叠屏手机将会在第三季度上市，如今随着时间临近，新机的各种消息也开始浮出水面。据悉，这款新机将会被命名为“On
K8S | Service服务发现

一、背景在微服务架构中，这里以开发环境「Dev」为基础来描述，在K8S集群中通常会开放：路由网关、注册中心、配置中心等相关服务，可以被集群外部访问；图片对于测试「Tes」环境或者
三万字盘点 Spring 九大核心基础功能

大家好，我是三友~~今天来跟大家聊一聊Spring的9大核心基础功能。话不多说，先上目录：图片友情提示，本文过长，建议收藏，嘿嘿嘿！一、资源管理资源管理是Spring的一个核心的基础功能，不
一个注解实现接口幂等，这样才优雅！

场景码猿慢病云管理系统中其实高并发的场景不是很多，没有必要每个接口都去考虑并发高的场景，比如添加住院患者的这个接口，具体的业务代码就不贴了，业务伪代码如下：图片上述代码有
小米MIX Fold 3配置细节曝光：搭载领先版骁龙8 Gen2+罕见5倍长焦

这段时间以来，包括三星、一加、荣耀等等有不少品牌旗下的最新折叠屏旗舰都得到了不少爆料，而小米新一代折叠屏旗舰——小米MIX Fold 3此前也屡屡被传
华为Mate60标准版细节曝光：经典星环相机模组回归

这段时间以来，关于华为新旗舰的爆料日渐密集。据此前多方爆料，今年华为将开始恢复一年双旗舰战略，除上半年推出的P60系列外，往年下半年的Mate系列也将
iQOO Neo8 Pro真机谍照曝光：天玑9200+和V1+旗舰双芯加持

去年10月，iQOO推出了iQOO Neo7系列机型，不仅搭载了天玑9000+，而且是同价位唯一一款天玑9000+直屏旗舰，一经上市便受到了用户的广泛关注。在时隔半年后，
SN570 NVMe SSD固态硬盘价格与性能兼具

SN570 NVMe SSD固态硬盘是西部数据发布的最新一代WD Blue系列的固态硬盘，不仅闪存技术更为精进，性能也得到了进一步的跃升。WD Blue SN570 NVMe SSD的包装外