資訊專欄INFORMATION COLUMN
摘要：核心概念保存狀態(tài)。在上一篇搞事技巧中利用來(lái)加深了解了的彈性容器屬性，這一節(jié)是要利用來(lái)了解的彈性項(xiàng)目屬性。最后很多屬性我們可能難以理解其效果，個(gè)人認(rèn)為運(yùn)用來(lái)解釋不失為一種良好的方式。
介紹
在 JavaScript 中，我們可以利用變量，DOM 來(lái)保存狀態(tài)，而 CSS 當(dāng)中，我們也可以利用偽類選擇器來(lái)保存狀態(tài)，這就是 CSS 搞事的核心了。
核心概念：保存狀態(tài)。
在上一篇 CSS 搞事技巧：checkbox+label+selector 中利用 checkbox+label+selector 來(lái)加深了解了 Flex 的彈性容器屬性，這一節(jié)是要利用 :hover+:active 來(lái)了解 Flex 的彈性項(xiàng)目屬性。
這兩個(gè)屬性你有沒(méi)有很熟悉呢，其實(shí)我們經(jīng)常在 a 標(biāo)簽上使用它們
LVHA 順序: :link — :visited — :hover — :active
效果圖：
示例源碼、在線示例
示例由于作者找不到工作，陷入自閉缺乏創(chuàng)作激情，所以這一個(gè)環(huán)節(jié)就略過(guò)……
技巧說(shuō)明hover 觸發(fā)時(shí)，隱藏的子元素顯示；active 觸發(fā)時(shí)，子元素按照需求變化。
代碼解讀 1. 基礎(chǔ)布局因?yàn)檎故拘缘臇|西需要垂直居中展示，所以我利用 Vue 的 props 固化了垂直居中的樣式：
hello flex item
為了更容易演示，有請(qǐng)高矮胖瘦均不一致的三兄弟：
大哥二弟三妹
為它們?cè)黾訕邮剑⑻砑觽卧兀?/p>
查看一下效果：
2. :hover基礎(chǔ)布局完成，接著是添加 :hover 效果。當(dāng)鼠標(biāo)懸停時(shí)，兩個(gè)偽元素將會(huì)顯示，并且一個(gè)往上一個(gè)往下：
.flex__item
&::before
opacity 0
&::after
opacity 0
.flex__item:hover::before
transform translateY(-80px)
opacity 1
.flex__item:hover::after
transform translateY(80px)
opacity 1
查看效果：
3. :active在我的記憶中，:active 是對(duì)任何元素都生效的，結(jié)果偽元素上設(shè)置失敗了，然后就去看了下 MDN：
或許偽元素與元素本身算作一體？還是說(shuō)要選擇到父元素（線索：:focus-within）？這個(gè)留之后解決吧，F(xiàn)Lag +1。取舍的辦法還是有的（偽裝），犧牲帶頭大哥吧：
.flex__item
&:nth-child(1)
width 20%
height 20%
&::after
position absolute
content "背水一戰(zhàn)"
padding 10px 6px
border-radius 6px
color #e0c8d1 // 淡青紫
background-color #1661ab // 靛青
transition all 0.5s linear
opacity 0
&:nth-child(2)
width 16%
height 18%
&::before
position absolute
content "一人得道"
padding 10px 6px
border-radius 6px
color #e0c8d1 // 淡青紫
background-color #1661ab // 靛青
transition all 0.5s linear
opacity 0
&:nth-child(3)
width 14%
height 28%
&::before
position absolute
content "一人得道"
padding 10px 6px
border-radius 6px
color #e0c8d1 // 淡青紫
background-color #1661ab // 靛青
transition all 0.5s linear
opacity 0
查看效果：
為偽類添加 :active 效果：
.flex__item:active::before, .flex__item:active::after color #f1908c // 榴子紅 background-color #fff box-shadow 0 2px 4px rgba(0, 0, 0, .5), 2px 0 4px rgba(0, 0, 0, .6)
查看效果：
4. align-self給子元素添加 align-self 不同的值：
.flex__item
&:nth-child(1)
&:active
align-self flex-end
&:nth-child(2)
&:active
align-self flex-start
&:nth-child(3)
&:active
align-self flex-start
最后結(jié)果就如介紹中所示了。
最后CSS 很多屬性我們可能難以理解其效果，個(gè)人認(rèn)為運(yùn)用 CSS 來(lái)解釋 CSS 不失為一種良好的方式。
參考資料MDN
中國(guó)色
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116045.html
摘要：默認(rèn)盒模型的正方形在上方已經(jīng)說(shuō)明了，正方形的被擠壓為時(shí)就會(huì)得到三角形的效果。這里選擇一種較為取巧的形式，因?yàn)檫@邊使用的是行內(nèi)樣式，所以可以直接在它的上獲取。面試前還是要為面試刷下題目的，不然真的容易懵 介紹 出門忘帶電源線，快遞到了終于可以繼續(xù)水文章了。好不容易獲得一個(gè)面試機(jī)會(huì)，面試官很 Nice，可惜的是當(dāng)時(shí)處于懵逼狀態(tài)，錯(cuò)過(guò)了大好的機(jī)會(huì)： 面試官：巴拉巴拉吧…… 我：嗯，啊，這個(gè)，...
摘要：而通過(guò)實(shí)現(xiàn)則簡(jiǎn)單多了源碼原因解釋中間一欄為核心，所以需要優(yōu)先渲染，結(jié)構(gòu)也就放在了前面，主要是使用屬性將放置到前方。源碼的列數(shù)每列的個(gè)數(shù)函數(shù)原因解釋實(shí)現(xiàn)瀑布流還是比較簡(jiǎn)單的。 介紹 這是關(guān)于 Flex 布局的實(shí)踐，原想還水一點(diǎn)字?jǐn)?shù)來(lái)介紹 Flex 相關(guān)屬性，想想還是算了，阮一峰大佬的兩篇文章推上： Flex 布局教程：語(yǔ)法篇 Flex 布局教程：實(shí)例篇 如何用 CSS 來(lái)增進(jìn)對(duì) Fl...
摘要：列出這個(gè)兩個(gè)屬性的常用值看可知已經(jīng)增加了更多的值代碼解讀該項(xiàng)目是通過(guò)來(lái)渲染的，所以會(huì)使用到的語(yǔ)法，不過(guò)此處僅使用的循環(huán)來(lái)解決重復(fù)書寫的問(wèn)題該效果參考來(lái)源。接著使用布局來(lái)將它們分割，因?yàn)檫@次主要將的不是，所以就不進(jìn)行闡述了。 介紹 其實(shí)這篇文章寫到一大半時(shí)它的名字還叫做 《重溫 Flex 布局》，結(jié)果寫著寫著就走了心，附上一圖表示心情吧： showImg(https://segmentf...
閱讀 2020·2023-04-26 01:41
閱讀 2543·2021-11-24 09:39
閱讀 1956·2021-11-24 09:38
閱讀 1995·2021-11-19 09:40
閱讀 3810·2021-11-11 11:02
閱讀 3322·2021-10-20 13:48
閱讀 3249·2021-10-14 09:43
閱讀 4499·2021-09-02 15:11
