'align-items: center/flex-end ' breaks

鄒強(qiáng) 發(fā)布于2019-08-02 16:13 / 3078人閱讀

摘要：實(shí)例結(jié)果左側(cè)區(qū)域的不見(jiàn)了。而且滾動(dòng)也不會(huì)出現(xiàn)。這是因?yàn)橹粫?huì)對(duì)下方或右側(cè)超出的部分滾動(dòng)，對(duì)左側(cè)和上方無(wú)效左側(cè)可以嘗試設(shè)置超出。也是橫向無(wú)滾動(dòng)解決方案中間再包一層實(shí)例結(jié)果

實(shí)例


  
    
      content
    
    
      content

.slidesWrap {
  display: flex;
  align-items: center;
  overflow: auto;
}

.slide {
  overflow: auto;
  flex: 1;
  max-height:100%;
}

結(jié)果：

左側(cè)區(qū)域的content不見(jiàn)了。而且滾動(dòng)也不會(huì)出現(xiàn)。
這是因?yàn)閛verflow：scroll 只會(huì)對(duì)下方或右側(cè)超出的部分滾動(dòng) ，對(duì)左側(cè)和上方無(wú)效（左側(cè)可以嘗試float: right設(shè)置超出。也是橫向無(wú)滾動(dòng)）

解決方案

1.中間再包一層
2.max-height:100%;

實(shí)例：


  
    
      content
    
    
      content

.slidesWrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.slide {
  overflow: auto;
  flex: 1;
  max-height:100%;
}

結(jié)果：

云服務(wù)器 GPU云服務(wù)器 attr&039&039checked&039&039 given&039&039 php游戲代碼&039&039 java好學(xué)嗎&039&039

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54904.html

相關(guān)文章

&#039;align-items: center/flex-end &#039; breaks

摘要：實(shí)例結(jié)果左側(cè)區(qū)域的不見(jiàn)了。而且滾動(dòng)也不會(huì)出現(xiàn)。這是因?yàn)橹粫?huì)對(duì)下方或右側(cè)超出的部分滾動(dòng)，對(duì)左側(cè)和上方無(wú)效左側(cè)可以嘗試設(shè)置超出。也是橫向無(wú)滾動(dòng)解決方案中間再包一層實(shí)例結(jié)果實(shí)例 content content .slidesWrap { display: flex; align-items: cente...

codergarden 2019-08-29 18:42 評(píng)論0 收藏0
&#039;{ }&#039;在不同上下文中的作用

摘要：大括號(hào)的作用，在不同的上下文中差別很大以下觀點(diǎn)若有錯(cuò)誤，請(qǐng)前輩及時(shí)指出一被當(dāng)做對(duì)象字面量如，外層的被賦值給了，這里的被當(dāng)做對(duì)象處理。本文參考你不知道的大括號(hào)‘{ }’的作用，在不同的上下文中差別很大！以下觀點(diǎn)若有錯(cuò)誤，請(qǐng)前輩及時(shí)指出！一、{ }被當(dāng)做對(duì)象字面量如：var obj = { foo: function(){} };，外層的{...}被賦值給了obj，這里的{...}被...

Reducto 2019-08-20 11:27 評(píng)論0 收藏0
避免取值時(shí)出現(xiàn)Cannot read property &#039;xx&#039; of unde

摘要：由于是以空函數(shù)為代理對(duì)象，我們可以將執(zhí)行它，觸發(fā)。中會(huì)遍歷數(shù)組依次取值，如果發(fā)現(xiàn)無(wú)法繼續(xù)取值則，跳出循環(huán)。本文來(lái)自我的博客，歡迎大家去GitHub上star我的博客我們?cè)谌≈堤貏e是鏈?zhǔn)饺≈档臅r(shí)候，常常會(huì)遇到Cannot read property xx of undefined的錯(cuò)誤，如何避免這種情況的發(fā)生呢？這里有幾種方法以供參考使用成熟的庫(kù)方法這是最簡(jiǎn)單的一種手段：只用引入...

fantix 2019-08-23 15:23 評(píng)論0 收藏0
q&#039;qJavaScript學(xué)習(xí)第三天筆記（語(yǔ)句）

摘要：循環(huán)語(yǔ)句循環(huán)語(yǔ)句是什么循環(huán)語(yǔ)句是一系列反復(fù)執(zhí)行到符合特定條件的語(yǔ)句。示例代碼如下跳轉(zhuǎn)語(yǔ)句什么是跳轉(zhuǎn)語(yǔ)句跳轉(zhuǎn)語(yǔ)句就是使得代碼的執(zhí)行可以從一個(gè)位置到另一個(gè)位置，跳轉(zhuǎn)語(yǔ)句包括和兩種。語(yǔ)句語(yǔ)句語(yǔ)句的概述 1.描述：在JavaScript中，語(yǔ)句使用分號(hào)（;）進(jìn)行分隔。可以在每行編寫(xiě)一條語(yǔ)句，也可以在每行編寫(xiě)多條語(yǔ)句（建議每行只編寫(xiě)一條語(yǔ)句）。JavaScript解釋器按照語(yǔ)句...

chenjiang3 2019-08-23 10:51 評(píng)論0 收藏0
歐拉函數(shù)(Euler&#039; totient function )

摘要：傳送門這個(gè)就是主角歐拉函數(shù)。在數(shù)論中，對(duì)正整數(shù)，歐拉函數(shù)是小于或等于的正整數(shù)中與互質(zhì)的數(shù)的數(shù)目。歐拉函數(shù)實(shí)際上是模的同余類所構(gòu)成的乘法群即環(huán)的所有單位元組成的乘法群的階。歐拉函數(shù)(Euler totient function ) Author: Jasper Yang School: Bupt 前言 gamma函數(shù)的求導(dǎo)會(huì)出現(xiàn)所謂的歐拉函數(shù)（phi），在一篇論文中我需要對(duì)好幾個(gè)歐...

lewinlee 2019-07-31 12:23 評(píng)論0 收藏0