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