尝试使用flex

Question

在我尝试理解flex时，我决定要制作一个网格。这是一个总体布局图：

这个想法是有

• a）侧栏
• b）主要容器碾压的粘性标题
• c）保存主要数据的主要容器
• d）根据网格上的内容大小调整的项目

要实现我创建的粘性标题，请执行以下操作：

<div>
<div class="stickyHeader"></div>
<div class="contentscroll"></div>
</div>

其中

.stickyHeader{
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    height:200px;
    background-color:rgba(128, 128, 128, 0.178);
}

和

.contentscroll{
    overflow: scroll;
    height:100%;
    display:flex;
    box-sizing: border-box;
    /* justify-content: flex-start; */
    flex-flow:row wrap;
}

问题是flex元素正在尝试填充100％的主容器，因此如果我有一个item元素vs 6（意味着item元素和sticky之间的空格），页面看起来会非常不同当我真的希望它成为一个特定的距离时，标题似乎是可变的。

非常感谢，你可以在这里找到完整的代码：

https://jsbin.com/wivudiqisa/edit?html,css,output

Answer 1

我不确定，你的意思是什么＆＃34;粘性标题似乎变量＆＃34;但您可以像这样分发flex元素：

2018-03-30 (15:35:17) java.lang.IllegalArgumentException: Failed to match any files with the pattern: gs://.......

我发现本指南很有用：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

对 Css Grid 的支持得到了极大的改进，您无需费力构建网格！它有超过 90% 的浏览器支持，所以让我们开始使用 Grids

如果您想了解更多信息，我已经整理了一篇文章，其中详细介绍了网格的使用情况以及何时使用 flex here