CSS柔性項默認高度問題

我正在學習CSS柔性盒的東西，當我與它周圍玩我發現了一個有線的事情：CSS柔性項默認高度問題

.container { 
 
    width: 100%; 
 
    display: flex; 
 
    border: 5px solid grey; 
 
} 
 

 
.box1 { 
 
    border: 2px solid red; 
 
    width: 30%; 
 
    height: 500px; 
 
} 
 

 
.box2 { 
 
    border: 2px solid blue; 
 
    width: 40%; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="box box1"> 
 
     <p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p> 
 
    </div> 
 

 
    <div class="box box2"> 
 
     <p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p> 
 
    </div> 
 

 
    <div class="box box3"> 
 
     <p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p> 
 
    </div> 
 
    </div> 
 
</body>

有線的事情是：我已經將box1元素的高度設置爲500px，但從結果中，我看到box2獲得了與500px默認值相同的高度，即使我沒有在其上設置任何高度值。然後，我改變了BOX2高度值300像素並沒有給出一個固定的高度上BOX3：

.box1{ 
     border: 2px solid red; 
     width: 30%; 
     height: 500px; 
    } 

    .box2{ 
     border: 2px solid blue; 
     width: 40%; 
     height:300px; 
    } 


    .box3{ 
    border: 2px solid blue; 
    width:30%; 
    }

這次從結果我發現BOX3的高度爲500像素，所以我的問題是：

調用容器作爲display:flex後，是沒有高度預先設定的柔性項目將繼承最大HIGHT價值的其他Flex項目？
調用容器作爲display:flex後，可能我認爲它包含的所有項目將像inline-block元素？

來源

2017-11-04 mystreie

1.調用容器中顯示後：柔性，是沒有高度預先設定的柔性項目將繼承最大高度值的其他Flex項目？

行所有項目將採取他們的最大高度默認。

2.致電容器作爲顯示器後：柔性，我可以考慮它包含的所有項目將像直列blockelements？

是的，你可以使用display: inline-flex（找到更多信息在本頁面inline-flex值）。

來源

2017-11-04 03:20:11

CSS柔性項默認高度問題

回答

相關問題