国产一区二区在线视频免费观看,床上性生活视频在线观看,亚洲国产成人精品无码区在线观看

我是路程lucky，6年web前端開發(fā)經(jīng)驗(yàn)，目前參與的項(xiàng)目技術(shù)棧主要是React，歡迎關(guān)注~
今天給大家分享一下解決一個(gè)遇到的樣式布局問(wèn)題經(jīng)歷，“標(biāo)簽寬度自適應(yīng)，間距固定，每行指定個(gè)數(shù)”，看似簡(jiǎn)單，但新手朋友如果不注意很容易踩坑，下面我們就來(lái)逐步分析解決這個(gè)css布局小問(wèn)題。
場(chǎng)景描述工作中遇到這樣一個(gè)需求場(chǎng)景：由于視覺設(shè)計(jì)師的視覺審美要求下，h5頁(yè)面中，查詢的商品列表每行有多個(gè)標(biāo)簽標(biāo)簽個(gè)數(shù)不固定，寬度自適應(yīng)，左右間距固定。整體左右間距30px，標(biāo)簽之間間距6px，頁(yè)面整體寬度640px（不同機(jī)型不同寬度）。
注：當(dāng)前h5腳手架開發(fā)采用的scss，已集成了px2rem也就是像素轉(zhuǎn)rem，編寫px即可實(shí)現(xiàn)不同寬度的自適應(yīng) 。

初步思考通常，由于移動(dòng)端布局有一定兼容性等問(wèn)題，一些特定的布局如display:grid等，我們還是謹(jǐn)慎使用。我們想到的第一想法是flex布局，可以使得寬度自適應(yīng)，閃現(xiàn)的思路是：

父元素設(shè)置為display:flex，自動(dòng)換行
子元素設(shè)置間距：距離上下左右，然后寬度就自適應(yīng)，然后就好了？

// scss
// 父元素
.parent {
display:flex;
flex-wrap:wrap;
margin-left: 10px;
margin-right: 30px;
}
// 大致的想法
.child {
flex: 1;
margin: 10px 6px;
width: auto; // ?這個(gè)寬度如何處理
}
對(duì)于
justify-content:space-between，期初也想使用這種，但需求要間距固定，無(wú)法適用。
問(wèn)題來(lái)了現(xiàn)實(shí)是殘酷的，你會(huì)發(fā)現(xiàn)子元素全部在一排，沒(méi)有寬度，也發(fā)現(xiàn)這里的最大難點(diǎn)就是如何確定標(biāo)簽寬度

如何實(shí)現(xiàn)一行三個(gè)
每行的三個(gè)標(biāo)簽第二個(gè)標(biāo)簽和第三個(gè)標(biāo)簽之間有間距，而第一個(gè)和左邊相對(duì)頁(yè)面左右邊是沒(méi)有間距的。

嘗試解決我們知道問(wèn)題中使用flex布局的核心問(wèn)題是要有最小寬度，沒(méi)有寬度就不會(huì)撐開。css3的calc在移動(dòng)h5中的兼容性還是不錯(cuò)的，我們可以動(dòng)態(tài)計(jì)算寬度。根據(jù)每行顯示3個(gè)，間距固定，那么我們可以得出以下計(jì)算公式：
子元素標(biāo)簽寬度 = ( 頁(yè)面總寬度100% – 頁(yè)面左右寬度30px * 2 – 標(biāo)簽左右邊框2px * 3 – 邊框左右間距6px * 2 ) / 3；
化簡(jiǎn)：
子元素標(biāo)簽寬度 = 100% / 3 – 30px * 2 / 3 – 2px * 3 / 3 – 6px * 2 / 3
= 100% / 3 – 26px
// 子元素寬度
.child {
width: calc(100% / 3 – 26px);
}
還是有問(wèn)題，1行只能展示2個(gè)這樣布局，還是發(fā)現(xiàn)出現(xiàn)問(wèn)題，雖然我們按照思路進(jìn)行布局，但我們忽略了一個(gè)重點(diǎn)：標(biāo)簽的左右間距規(guī)律是：第1、4、7等最左側(cè)第一個(gè)，也就是3n+1距離左側(cè)是空的。第一時(shí)間，你會(huì)想通過(guò)偽類 nth-chilld(3n+1)來(lái)實(shí)現(xiàn)標(biāo)簽。但如果真這樣做，這里對(duì)于h5頁(yè)面來(lái)說(shuō)，

誤差大，這種間距稍不留神就會(huì)出現(xiàn)溢出換行
維護(hù)成本高，其他小伙伴維護(hù)需要注意這個(gè)偽類控制

我們換一種思路來(lái)考慮。其實(shí)這類場(chǎng)景PC端是很常見的，我們可以聯(lián)動(dòng)父元素來(lái)解決。
思路：

父元素寬度設(shè)置為100%加上一個(gè)間距的距離
父元素距離左側(cè)減少一個(gè)間距的距離

優(yōu)點(diǎn)：

間距可以抽出為變量，方便維護(hù)
誤差小

最終方案父元素flex布局，距離左側(cè)為指定寬度，子元素寬度應(yīng)該為正常的三個(gè)相同寬度和間距元素。
子元素標(biāo)簽寬度 = ( 頁(yè)面總寬度100% – 頁(yè)面左右寬度30px * 2 – 標(biāo)簽左右邊框2px * 3 – 邊框左右間距6px * 3 ) / 3；
化簡(jiǎn)：
子元素標(biāo)簽寬度 = 100% / 3 – 30px * 2 / 3 – 2px * 3 / 3 – 6px * 3 / 3