如何根據剩余的視口空間制作 div 寬度

Question

請查看我創建的線框以了解我想要實現的目標。 我創建了 2 個屏幕，因此您可以根據不同的屏幕尺寸查看所需的行為。

我基本上想要一個居中對齊的容器“Main-Section”，其最大寬度（取決於屏幕尺寸）和內部的 12col 網格。 容器的左側和右側應該是兩個 div“Left/Right Lane”，它們共享每一側的剩余空間/寬度。

我的主要問題：如何設置左/右通道，以便它們均勻地占據屏幕寬度的其余部分？

感謝您的幫助！

Answer 1

您的問題不包括代碼。 如果您的技術能力水平較低，我建議您使用 Bootstrap Grid System。 https://getbootstrap.com/docs/5.0/layout/grid/如果您是初學者，閱讀文檔並理解它是一個很好的做法。

Answer 2

好像我自己找到了答案。 我遺漏的重要信息是：

彈性增長

.main {
  display: flex;
}


.left-col, .right-col {
  flex-grow: 1;
}

.center-col {
  width: 500px;
}