flex布局，子元素寬度不符合預(yù)期

Coly 發(fā)布于2019-08-29 17:27 / 1726人閱讀

摘要：預(yù)期子元素內(nèi)容不同，但是希望子元素平均分成三份遇到的問題實(shí)際上每個(gè)子元素會(huì)根據(jù)內(nèi)容寬度的不同而不平均分配代碼文字文字文字文字文字文字文字文字文字文字文字文字解決方案給每個(gè)子元素的寬度設(shè)置為就解決這個(gè)問題啦并且這個(gè)解決方案也適合在

預(yù)期

子元素內(nèi)容不同，但是希望子元素平均分成三份：

遇到的問題

實(shí)際上每個(gè)子元素會(huì)根據(jù)內(nèi)容寬度的不同而不平均分配：

代碼:


    
      文字文字文字
    
    
      文字文字文字文字文字文字文字文字文字
    
    
      888373773

      .box{
        display: flex;
      }
      .child{
        height: 300px;
      }
      .child1{
        flex-grow: 1;
        background-color: #0f0;
      }
      .child2{
        flex-grow: 1;
        background-color: #f00;
      }
      .child3{
        flex-grow: 1;
        background-color: #fff000;
      }

解決方案

給每個(gè)子元素的寬度設(shè)置為0:

      .child{
        height: 300px;
        width: 0;
      }

就解決這個(gè)問題啦！?。。?！

并且這個(gè)解決方案也適合在flex布局中，overflow失效的情況！

原理

不太清楚，待更新.....

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

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

相關(guān)文章

【CSS練習(xí)】IT修真院--練習(xí)5-護(hù)工個(gè)人界面

摘要：任務(wù)五一個(gè)最常見的移動(dòng)端頁(yè)面完成的事情學(xué)習(xí)張?chǎng)涡袷澜缦嚓P(guān)章節(jié)張?chǎng)涡裣盗辛私馔ㄅ浞x擇器性能優(yōu)化瀏覽器渲染原理學(xué)習(xí)各屬性及效果完成任務(wù)五學(xué)習(xí)編碼規(guī)范編碼規(guī)范并按照編碼規(guī)范優(yōu)化代碼完成深度思考計(jì)劃的事情找時(shí)間把前面任務(wù)的官方提供鏈接過一遍，查缺任務(wù)五、一個(gè)最常見的移動(dòng)端頁(yè)面完成的事情 float學(xué)習(xí) 張?chǎng)涡瘛禖SS世界》相關(guān)章節(jié) 張?chǎng)涡?float系列了解CSS通配符 &...

Jonathan Shieber 2019-08-29 15:42 評(píng)論0 收藏0
flex布局的元素如何分配容器的剩余空間

摘要：三個(gè)元素會(huì)從左往右占據(jù)父元素的空間這很顯然。左右側(cè)邊欄的寬度都是，中間元素的寬度將會(huì)占據(jù)元素的剩余寬度。同樣會(huì)導(dǎo)致父元素有部分剩余空間沒有分配。自從開始開學(xué)習(xí) CSS 布局，想要比較靈活的把父元素的空間分配給各個(gè)子元一直是各個(gè)前端程序員的夢(mèng)想。在 flex 之前，如果不是專門去搜索相關(guān)的解決方案，一般人幾乎想不出非常靈活的三（多）欄等高布局方案，而即使看了解決方案，很多人也會(huì)大呼奇技...

ethernet 2019-08-30 15:44 評(píng)論0 收藏0
寫給 Android 開發(fā)的小程序布局指南，Flex 布局！

摘要：不過在小程序中，這就不是我們需要考慮的了，微信已經(jīng)幫我們處理好了。而在新手階段，暫時(shí)只需要關(guān)注兩個(gè)參數(shù)指定一個(gè)塊級(jí)布局，它其內(nèi)的元素，總是起一個(gè)新行來顯示，而微信小程序的很多視圖容器組件，默認(rèn)的就是，例如等。 showImg(https://segmentfault.com/img/remote/1460000015285633?w=750&h=562); 一、序 Hi，大家好，我是承...

Salamander 2019-08-29 15:43 評(píng)論0 收藏0
CSS: 潛藏著的BFC

摘要：而就潛藏在其中，當(dāng)你修改樣式時(shí)，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識(shí)到的神奇之處。實(shí)例解決侵占浮動(dòng)元素的問題我們知道浮動(dòng)元素會(huì)脫離文檔流，然后浮蓋在文檔流元素上。在寫樣式時(shí)，往往是添加了一個(gè)樣式，又或者是修改了某個(gè)屬性，就達(dá)到了我們的預(yù)期。而BFC就潛藏在其中，當(dāng)你修改樣式時(shí)，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識(shí)到BFC的神奇之處。一、什么是BFC（Block Form...

learn_shifeng 2019-08-29 13:54 評(píng)論0 收藏0
flex-item屬性之flex-grow、flex-shrink了解下

摘要：容器仍然是，灰灰，小橘，需要一起減掉才可以。但是灰灰和小橘的瘦身能力明顯不一樣，他們?cè)O(shè)置了不同的，分別為和。瘦掉的這需要平分到灰灰加上小橘身上的每一個(gè)上。前言 flex布局，想必css江湖上的各位俠士都用得很多了，那我們今天就來說說flex-item下的幾個(gè)不太常用的屬性吧（其實(shí)是鄙人用的不多（┬＿┬）而已啦，好奇了解了下）。從容貌上來看，grow，shrink，grow，shri...

Simon_Zhou 2019-08-30 15:47 評(píng)論0 收藏0