原文首发于微信公众号:jzman-blog,欢迎关注交流!
Flex 是 W3C 提出的一种新的布局方案,可以非常方便的完成响应式页面布局,到目前为止几乎所有浏览器都支持,Flex 是 Flexible Box 的缩写,翻译过来是"弹性布局"的意思,下面一起来学习 Flex 布局的使用。
采用 Flex 布局的元素称为 Flex 容器,所有子元素将自动成为容器成员,也可以称之为 Flex 项目,也就是该 Flex 布局的子 View ,下面是 Flex 布局默认设置下的示意图:
如上图所示,默认的 Flex 容器的存在两个轴:水平的主轴(main axis)和垂直的交叉轴(cross axis),主轴和交叉轴的方向不是绝对的,而是会因为设置的不同而不同,下面是与主轴和交叉轴相关的几个位置:
row | row-revarse | column | column-revarse |
---|---|---|---|
nowrap | wap | wrap-revarse |
---|---|---|
flex-flow:flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。
justify-content:设置项目在主轴上的对齐方式,可设置的值如下:
flex-start | flex-end | center | space-between | space-around | space-evenly |
---|---|---|---|---|---|
stretch | flex-start | flex-end | center | baseline |
---|---|---|---|---|
stretch | flex-start | flex-end | center | space-between | space-around |
---|---|---|---|---|---|
flow-grow=0 | flow-grow=1 | flow-grow设置不同值 |
---|---|---|
flow-shrink=1 | flow-shrink=0 | flow-shrink设置不同值 |
---|---|---|
上面图示中,当 flex-shrink 全设置为 0,每个项目不会缩放,所以第四个方块被挤出去了,而相应的设置 flex-shrink 为 1,则可以在空间不足是进行一定程度的缩放。
auto | stretch | flex-start | flex-end | center | baseline |
---|---|---|---|---|---|
上面的效果中设置 auto 会跟随 flex 容器中 align-items 的设置。
最近尝试了一下微信小程序,感觉开发起来难度也不是很大,觉得本篇文章的内容也是微信小程序中最重要的内容了,本来打算继续进行小程序系列的学习,但是看了一下后面的内容无非就是小程序各个组件的使用了,如果有其他项目的开发经验,实在没必要一个组件一个组件去验证学习,所以小程序的学习就到此为止,最后,说一点微信小程序最重要的我觉得还是 Flex 布局。可以选择关注个人微信公众号:jzman-blog 获取最新更新,一起交流学习!