鍍金池/ 問(wèn)答/HTML/ flex布局均分高度了，沒(méi)有自適應(yīng)內(nèi)容高度，怎么回事？附圖

flex布局均分高度了，沒(méi)有自適應(yīng)內(nèi)容高度，怎么回事？附圖

圖片描述

回答
編輯回答
逗婦惱

我猜測(cè)，你應(yīng)該需要設(shè)置一下flex布局中子元素的增長(zhǎng)和縮小。

我的解決方案是你可以試試給所有的子元素添加這樣一行代碼：

flex: 1 1 auto;

如果有不理解的，你可以參考下我下面的解釋

flex-grow: 0;
    /*這個(gè)屬性用于對(duì)Flex項(xiàng)目中各個(gè)項(xiàng)目是否填充滿容器 默認(rèn)值0 關(guān)閉增長(zhǎng)*/
flex-shrink: 1;
    /*這個(gè)屬性用于對(duì)Flex項(xiàng)目中各個(gè)項(xiàng)目是否縮小至初始大小 默認(rèn)值為1 縮小打開(kāi)*/
flex-basis: auto;
    /*這個(gè)屬性用于對(duì)Flex項(xiàng)目中設(shè)置各個(gè)項(xiàng)目的初始大小 類似width屬性 默認(rèn)值auto 按內(nèi)容大小計(jì)算*/
    /*flex-basis: 300px || em || rem || % || ... 值不能設(shè)置為0 應(yīng)該帶上單位; */
flex: 0 1 auto;
    /*這個(gè)屬性為flex-grow,flex-shrink和flex-basis屬性的集合，類似border屬性*/
    /*flex: 0 0 auto; 不伸展 不收縮 寬度為內(nèi)容大小 縮小瀏覽器寬度會(huì)出現(xiàn)項(xiàng)目突出容器的怪異行為*/
    /*flex: 1 1 auto; 或flex:auto; 自動(dòng)計(jì)算初始化寬度，但是如果有必要，會(huì)伸展或者收縮以適應(yīng)整個(gè)可用寬度。*/
    /*flex: 正數(shù) 1 0; 或flex:正數(shù); 初始寬度設(shè)置為零，伸展項(xiàng)目以填滿可用空間，只要有可能就收縮項(xiàng)目*/
2017年1月24日 06:05