一加Ace2 Pro真機(jī)揭曉 鈦空灰配色質(zhì)感拉滿
終于，在經(jīng)過(guò)了幾波預(yù)熱之后，一加Ace2 Pro的外觀真機(jī)圖在網(wǎng)上出現(xiàn)了。還是博主數(shù)碼閑聊站曝光的，這次的外觀設(shè)計(jì)還是延續(xù)了一加11的方案，只是細(xì)節(jié)上有了調(diào)整，例如新加入了鈦空灰
最近，Chrome 123又悄悄推出了一個(gè)CSS新特性，那就是align-content支持普通的block容器了！那么，這個(gè)特性有什么用呢？一起來(lái)了解一下吧！
align-content相信大家都聽說(shuō)過(guò)，但是之前只能在 flex 和 grid容器上才能生效。這里以flex為例，比如有這樣一個(gè)布局。
<div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div></div>簡(jiǎn)單修飾一下。
.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;}效果如下：
圖片
好像沒生效？這是因?yàn)閍lign-content針對(duì)的是多行，控制臺(tái)其實(shí)已經(jīng)有提示了。
圖片
所以，這里需要加上換行屬性。
.flex{ /**/ display: flex; flex-wrap: wrap; align-content: center;}這樣就生效了。
圖片
有人可能會(huì)想到align-items:center，可能大部分情況我們都是用的這個(gè)屬性來(lái)實(shí)現(xiàn)垂直居中，有什么區(qū)別呢？這里不妨來(lái)試試。
.flex{ /**/ display: flex; flex-wrap: wrap; /*align-content: center;*/ align-items:center}效果如下：
圖片
好像看不出有什么是居中的？這是因?yàn)閌`align-items`針對(duì)的是單行的，我們讓每個(gè)元素的高度不一致就能看出來(lái)了。
圖片
為啥兩行的間距這么大呢？這是因?yàn)閍lign-content默認(rèn)是stretch，會(huì)自動(dòng)充滿整個(gè)空間，如果設(shè)置成``align-content:end`就能看出效果了。
圖片
簡(jiǎn)單總結(jié)一下：
圖片
具體的很多細(xì)節(jié)，網(wǎng)上有很多教程，大家可以自己去查閱，這里就不多介紹了。
這里說(shuō)的塊級(jí)元素其實(shí)指的是除inline元素之外的元素，大家可以在控制臺(tái)查看。
圖片
有了這個(gè)特性，垂直居中將變得異常簡(jiǎn)單，比如：
<div class="con">歡迎關(guān)注前端偵探</div>設(shè)置align-content:center：
.con{ border-radius: 4px; padding: 10px; width: 100px; height: 100px; background: #FFD75A; align-content: center;}效果如下：
圖片
如果是多行塊級(jí)文本：
<ol class="con"> <li>歡迎</li> <li>關(guān)注</li></ol>也能完美垂直居中。
圖片
當(dāng)然這些用flex布局也能實(shí)現(xiàn)，只是稍微麻煩一點(diǎn)。
最近在項(xiàng)目中碰到這樣一個(gè)需求，需要在輸入多行文本時(shí)，默認(rèn)是居中的，超出后才正常滾動(dòng)。
圖片
難點(diǎn)就在于垂直居中，因?yàn)閠extarea是可替換元素，即使設(shè)置 flex也無(wú)法實(shí)現(xiàn)內(nèi)部文本垂直居中，現(xiàn)在有了align-content就好辦了，如下：
textarea{ align-content: center;}效果如下：
圖片
以上所有 demo 可以查看以下鏈接（Chrome 123+）：
一個(gè)比較不錯(cuò)的新特性，你學(xué)到了嗎？下面總結(jié)一下：
參考資料：
[1]CSS align-content (juejin.cn)： https://code.juejin.cn/pen/7360209107388727306
[2]CSS align-content (codepen.io)： https://codepen.io/xboxyan/pen/gOyQqwZ
本文鏈接：http://m.www897cc.com/showinfo-26-84590-0.htmlCSS align-content也能適用于普通容器了
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： React狀態(tài)管理專題：什么是Redux
下一篇： Go 最大挑戰(zhàn)、AI 方向、內(nèi)部?jī)?yōu)先級(jí)？2024 H1 開發(fā)者報(bào)告發(fā)布
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)