我是路程lucky ， 6年web前端開發經驗 ， 目前參與的項目技術棧主要是React ， 歡迎關注~
今天給大家分享一下解決一個遇到的樣式布局問題經歷 ， “標簽寬度自適應 ， 間距固定 ， 每行指定個數” ， 看似簡單 ， 但新手朋友如果不注意很容易踩坑 ， 下面我們就來逐步分析解決這個css布局小問題 。
場景描述 工作中遇到這樣一個需求場景：由于視覺設計師的視覺審美要求下 ， h5頁面中 ， 查詢的商品列表每行有多個標簽標簽個數不固定 ， 寬度自適應 ， 左右間距固定 。整體左右間距30px ， 標簽之間間距6px ， 頁面整體寬度640px（不同機型不同寬度） 。
注：當前h5腳手架開發采用的scss ， 已集成了px2rem也就是像素轉rem ， 編寫px即可實現不同寬度的自適應 。
初步思考 通常 ， 由于移動端布局有一定兼容性等問題 ， 一些特定的布局如display:grid等 ， 我們還是謹慎使用 。我們想到的第一想法是flex布局 ， 可以使得寬度自適應 ， 閃現的思路是：
父元素設置為display:flex ， 自動換行子元素設置間距：距離上下左右 ， 然后寬度就自適應 ， 然后就好了？// scss
// 父元素
.parent {
display:flex;
flex-wrap:wrap;
margin-left: 10px;
margin-right: 30px;
}
// 大致的想法
.child {
flex: 1;
margin: 10px 6px;
width: auto; // ?這個寬度如何處理
}
對于
justify-content:space-between ， 期初也想使用這種 ， 但需求要間距固定 ， 無法適用 。
問題來了 現實是殘酷的 ， 你會發現子元素全部在一排 ， 沒有寬度 ， 也發現這里的最大難點就是如何確定標簽寬度
如何實現一行三個每行的三個標簽第二個標簽和第三個標簽之間有間距 ， 而第一個和左邊相對頁面左右邊是沒有間距的 。嘗試解決 我們知道問題中使用flex布局的核心問題是要有最小寬度 ， 沒有寬度就不會撐開 。css3的calc在移動h5中的兼容性還是不錯的 ， 我們可以動態計算寬度 。根據每行顯示3個 ， 間距固定 ， 那么我們可以得出以下計算公式：
子元素標簽寬度 = ( 頁面總寬度100% – 頁面左右寬度30px * 2 – 標簽左右邊框2px * 3 – 邊框左右間距6px * 2 ) / 3；
化簡：
子元素標簽寬度 = 100% / 3 – 30px * 2 / 3 – 2px * 3 / 3 – 6px * 2 / 3
= 100% / 3 – 26px
// 子元素寬度
.child {
width: calc(100% / 3 – 26px);
}
還是有問題 ， 1行只能展示2個 這樣布局 ， 還是發現出現問題 ， 雖然我們按照思路進行布局 ， 但我們忽略了一個重點：標簽的左右間距規律是：第1、4、7等最左側第一個 ， 也就是3n 1距離左側是空的 。第一時間 ， 你會想通過偽類 nth-chilld(3n 1)來實現標簽 。但如果真這樣做 ， 這里對于h5頁面來說 ，

猜你喜歡

• 華為手機驗證碼自動填寫怎么設置 華為手機驗證碼自動填寫設置的方法
• 被自家狗咬了怎么處理 有什么解決的辦法
• 催收短信 網貸短信鏈接短信來自哪里
• 自制美白減肥的食譜介紹 自制美白減肥的食譜介紹有什么
• 致自己人生感言 有關人生的感悟介紹
• 自制青梅酒的危害 自制青梅酒的危害有哪些
• 自然堂各種系列價格介紹 自然堂套裝價格
• word文檔怎么自動生成目錄章節
• 夢見喜歡自己的人代表什么 夢見喜歡自己的人好不好呢
• 運籌帷幄之中決勝千里之外是誰說的 運籌帷幄之中決勝千里之外出自誰的作品