小程序学习

微信小程序开发之flex布局笔记

2017-09-05  本文已影响59人  8428944f2104

微信小程序开发推荐使用flex布局。本人在平时的小程序开发中,都是优先使用flex布局。对于一个搞不懂css的后端程序员来说,使用flex布局真的是事半功倍,怎么用怎么爽。

flex布局教程:http://www.runoob.com/w3cnote/flex-grammar.html

参考资料:http://www.runoob.com/css3/css3-flexbox.html

Flexbox可以在不同屏幕尺寸上提供一致的布局结构。一般来说,使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

一、容器上的标签:

display: flex

flex-direction: row |row-reverse |column |column-reverse

顺序指定了弹性子元素在父容器中的位置。

justify-content: flex-start | flex-end | center | space-between | space-around

弹性项沿着弹性容器的主轴线(main axis)对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch

设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

flex-wrap: nowrap - 默认| wrap | wrap-reverse

用于指定弹性盒子的子元素换行方式。(默认情况下(flex-direction: row),项目都排在一轴线上。flex-wrap属性定义,如果一条轴线排不下,如何换行)

align-content: flex-start | flex-end | center | space-between | space-around | stretch-默认

用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。(align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用.)

二、弹性子元素上的标签

order:

排序:用整数值来定义排列顺序,数值小的排在前面。可以为负值。

margin:

对齐:

设置"margin"值为"auto"值,自动获取弹性容器中剩余的空间。

margin-right: auto; 它将剩余的空间放置在元素的右侧。

设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中。(完美解决我们平时碰到的居中问题)

align-self:  auto | flex-start | flex-end | center | baseline | stretch

用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

用于指定弹性子元素如何分配空间。

就这些笔记。


小程序研究加入

上一篇 下一篇

猜你喜欢

热点阅读