如何應用 flex-grow？

Question

我正在嘗試創建一個增長為 2 的彈性行，然后是一個換行，但無法理解為什么它不能正常工作。

這是 CSS 和 HTML。

 .flex { height: 50px; width: 50px; background-color: black; }.flex1 { height: 50px; width: 50px; background-color: yellow; margin-left: 50px; }.flex2 { height: 50px; width: 50px; background-color: green; margin-left: 50px; }.flexcontainer { display: flex; flex-wrap: wrap; flex-grow: 2; flex-direction: row; }

 <div class="flexcontainer"> <div class="flex"> <div class="flex1"> <div class="flex2"> </div> </div> </div> </div>

Answer 1

您實現 flex-grow 的方式是完全錯誤的，因為 flex-grow 必須應用於子元素，如下面的代碼片段所示。

 #content { display: flex; justify-content: space-around; flex-flow: row wrap; align-items: stretch; }.box { flex-grow: 1; border: 3px solid rgba(0,0,0,.2); }.box1 { flex-grow: 2; border: 3px solid rgba(0,0,0,.2); }

 <h4>This is a Flex-Grow</h4> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> <div class="box" style="background-color:brown;">F</div> </div>

要閱讀有關 flex-grow 的更多信息，您應該從那里學習： https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow