标签： CSS

微信小程序 – 解决scroll-view制作横向滚动导航时的flex布局失效

0.写在前面

夏树进入大学之后的第一个寒假终于到了, 又可以安心地投入摸鱼事业(转战微信小程序), 为了熟悉小程序的开发(现在还只是熟悉一下WXML的语法), 我决定模仿摸一个”滴滴出行”的小程序页面!

下面记录的是我在制作一个横向滚动导航时出现的scroll-view使flex布局失效的问题以及相关的解决办法。

继续阅读微信小程序 – 解决scroll-view制作横向滚动导航时的flex布局失效

夏树的网页设计篇 – 栅栏布局整理

0.写在前面

早些时候, 栅栏布局(也称栅格系统)是内置于Bootstrap的一套响应式、移动设备优先的流式布局，之后也被其他前端框架所应用。响应式栅栏布局的使用让应用该布局的元素随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列，便于网页的分块排版。不过仅仅是为了使用栅栏布局便引入一整套前端框架，显然是考虑欠妥的，作为一篇笔记存档，本文将在下面的内容里整理介绍独立的响应式栅栏布局。

css-grid-layout

继续阅读夏树的网页设计篇 – 栅栏布局整理

[转载]flex布局语法教程

网页布局（layout）是CSS的一个重点应用。

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex布局将成为未来布局的首选方案。本文介绍Flex布局的语法。

继续阅读[转载]flex布局语法教程