MFWSCQ的博客

flex:

flex与grid响应式布局中的子容器滚动条问题最近在用grid布局写一些简单的响应式页面页面，遇到一个问题，就是我们的全局用grid布局或者flex布局中，遇到某个子元素的宽度或者高度是页面剩下的空间（flex是flex-grow:1的空间，grid是1fr的空间），但是这个元素空间又需要有滚动条的出现，即该元素中有很多子元素需要以滚动条的形式查看内容。grid中即使设置了overflow:...

除了显式的指定列大小之外，CSS Grid 还有个非常强大的功能 —— 模式填充（repeat-to-fill）列然后对内容进行自动布局。也就是说，开发者只需要指定列数，自适应方面的事情（视口尺寸小则显示列数少，反之则多）交给浏览器来处理就行了，也不需要用媒体查询。比如我们可以用grid-template-columns:repeat(6,1fr)来指定该容器中包含6列，每列宽度轨道...

我们在布局的时候通常会在导航栏上有居左和居右显示，中间留白，这样页面伸缩的时候不会影响效果。形如下图以往我们可能更多会使用float浮动布局来实现这种效果，但是flex得到广泛支持以后就可以更方便和快捷的实现这种效果了：代码如下： <div class="wrap"> <div class="item">标题1</div>...