資訊專欄INFORMATION COLUMN
摘要：子項(xiàng)內(nèi)容超出容器范圍，子項(xiàng)頂部內(nèi)容被遮住我們經(jīng)常用布局方式來實(shí)現(xiàn)垂直居中對齊，但是當(dāng)內(nèi)容高度是動態(tài)變化且超出了容器的高度時(shí)，無法滾動到頂部，導(dǎo)致頂部的內(nèi)容無法訪問。
flex子項(xiàng)內(nèi)容超出flex容器范圍，flex子項(xiàng)頂部內(nèi)容被遮住
我們經(jīng)常用flex布局方式來實(shí)現(xiàn)垂直居中對齊，但是當(dāng)內(nèi)容高度是動態(tài)變化且超出了flex容器的高度時(shí)，無法滾動到頂部，導(dǎo)致頂部的內(nèi)容無法訪問。
以往的彈窗效果都是用插件來實(shí)現(xiàn)，這次一個簡單的頁面不想引入那么多插件，自己動手豐衣足食。
彈窗要求：
上下左右居中對齊；
需要考慮到內(nèi)容超過一屏或者不夠一屏的伸縮性；
這些都是簡單貨，代碼如下： jsFiddle效果
flex-pop
01
02
03
04
05
01
02
03
04
05
01
02
03
04
05
01
02
03
04
05
01
02
03
04
05
01
02
03
04
05
01
02
03
04
05
01
02
03
04
05
缺陷：
內(nèi)容已經(jīng)超過了一屏，很明顯最上面的內(nèi)容是03，并不是實(shí)際最頂部的內(nèi)容；
如果把內(nèi)容刪掉一些，會發(fā)現(xiàn)是位置是居中的，效果正常。
問題是在內(nèi)容超出一屏的時(shí)候就無法看到最頂部的內(nèi)容。
解決方法：
給flex子項(xiàng)設(shè)置margin:auto;，也就是
.popContainer{ margin: auto; }
彈窗居中對齊效果
博客地址
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113846.html
摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學(xué)可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心。 寫在前面最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識，這里進(jìn)行一次基于CSS2、3的各種布局的方法總結(jié)。 常見的頁面布局 在拿到設(shè)計(jì)稿時(shí)，作為一個前端人員，我們首先會做的應(yīng)該是為設(shè)計(jì)圖大致地劃分區(qū)域，然后選擇一...
摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學(xué)可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心。 寫在前面最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識，這里進(jìn)行一次基于CSS2、3的各種布局的方法總結(jié)。 常見的頁面布局 在拿到設(shè)計(jì)稿時(shí)，作為一個前端人員，我們首先會做的應(yīng)該是為設(shè)計(jì)圖大致地劃分區(qū)域，然后選擇一...
摘要：挺早就接觸了的布局，深入使用也就是在近期移動端開發(fā)。屬性用于設(shè)置或檢索彈性盒模型對象的子元素如何分配空間。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。默認(rèn)值是，也就是不進(jìn)行縮放，占原來元素內(nèi)容寬度大小?！ ⊥υ缇徒佑|了css的flex布局，深入使用也就是在近期移動端開發(fā)。老來多健忘，只能自己梳理一下知識點(diǎn)，當(dāng)做溫故知新吧。 ，請?jiān)徯“椎牟攀鑼W(xué)淺，寫的不到位的地方請指正。 flex屬性...
摘要：我們會在本文給出一個易于理解的入門介紹。項(xiàng)的順序的屬性另外一個的能力，是能夠輕松改變元素的顯示順序。她想讓成為頁面的第一個元素，顯示在之前?？山邮艿闹涤?，或者一個數(shù)字后面緊跟著，，或其他長度單位。 轉(zhuǎn)載請注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。 原文出處：https://www.sitepoint.com/flexbox-css-flexible-...
閱讀 2561·2021-11-15 18:14
閱讀 1768·2021-10-14 09:42
閱讀 3833·2021-10-11 10:58
閱讀 4014·2021-10-09 09:44
閱讀 2533·2021-09-26 09:55
閱讀 2528·2021-09-24 10:38
閱讀 2089·2021-09-04 16:48
閱讀 3325·2021-09-02 15:21
