我想创建一个具有灵活列的网页布局,可以限制到某些最大宽度.例如,侧边栏菜单占用可用水平空间的30%,但不应超过200px.
使用CSS flexbox,我会选择这样的解决方案:
.flexbox-layout {
display: flex;
}
.flexbox-sidebar {
flex: 1 1 30%;
max-width: 200px;
background-color: lightblue;
}
.flexbox-content {
flex: 1 1 70%;
background-color: lightgreen;
}<p>Layout based on CSS flexbox:</p>
<div class="flexbox-layout">
<div class="flexbox-sidebar">
<ol>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ol>
</div>
<div class="flexbox-content">
<p>Content</p>
</div>
</div>这显然是一个最小的例子 - 真正的布局会复杂得多,我想利用CSS网格功能,如列/行跨越和自动列,以及媒体查询的响应性.到目前为止,我没有设法用CSS 网格实现上述flexbox示例的相同效果:
.grid-layout {
display: grid;
grid-template-columns: 30% 70%; /* Max. width for 1st column? */
grid-template-rows: auto; …