vue flex 布局實現div均分自動換行

2021-09-08 02:51:26 字數 860 閱讀 6273

許久沒有更新了,今天才意外發現以前還是沒有看懂盒模型,今天才算看懂了,首先我們今天來看一下想要實現的效果是什麼?當然適配是必須的,1920 或者 1376都測試過。效果如圖所選中區域所示:

一、關於flex布局我建議去看一下這篇部落格,我們主要用到flex布局的乙個換行屬性,它是flex-wrap: wrap,自動換行。

二、vue**

(1)html部分:

124,345

-10%   同比上月

(2)css部分

.home-card 

.home-img

.home-right }}

}

要想每乙個div剛好能自動填充適配,最關鍵的就是css樣式裡面的寬度計算:也就是width: calc(25%  -  30px),因為最大寬度是100%,每乙個平分下來是25%,剩下的這麼算呢?看圖

每乙個home-item共占用32px,去掉10px,每個平分2.5px,也就是home-item占用32-2.5=29.5px,算30px,這樣就實現寬度自動填充實現適配了。哈哈

CSS Flex彈性布局實現Div

前言前端樣式開發時經常會遇到 當子 div 長度大於 父 div 中需要實現換行時,我們採取flex布局解決此問題。如下 div 開啟應用div div div 開啟應用div div div 開啟應用div div div 開啟應用div div div 開啟應用div div div div 樣...

div實現簡單的頁面布局

摘要 使用html和css實現簡單的旅遊 布局,從而熟練地運用css樣式,達到美觀的布局效果。html style width 780px height 150px middle right footer css樣式 body container banner globallink globalli...

網頁布局 div

簡單的網頁布局 注釋就不寫了,看看就懂了,不懂看前面的兩個博文都有詳細講解 效果圖 網頁布局.html charset gb2312 網頁布局title rel stylesheet href style.css type text css head id first 導航div id second...