美文网首页Web前端之路让前端飞Web 前端开发
「微信小程序」32,如何使用css实现一个简单的顶部对齐?

「微信小程序」32,如何使用css实现一个简单的顶部对齐?

作者: 石桥码农 | 来源:发表于2017-05-17 10:03 被阅读1636次

如下图所示的顶部对齐效果,如何实现?

很简单:

style="align-items:flex-start;display:flex;"

是flex-start在起使用,display=flex也不可可缺。在默认情况下,align-items的值是middle。

定义和用法

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

JavaScript 语法:

object.style.alignItems="center"

良心推荐一枚可以在线查看、实时调试CSS的网站:菜鸟教程 - 学的不仅是技术,更是梦想!

注意:在该网站上有讲alignItems属性不被safari浏览器支持,经码农验证,是可以的。另外,小程序是封闭的环境,在小程序中使用align-items样式属性一点问题没有。

-

5月26日邀请参加live:零编程打造一款私人智能助理

新图书学习革命:有一位智能秘书陪伴学习,是一种什么体验

live推荐:零基础周末学习小程序开发

在微信公众号哲学李论,回复“微信小程序”,可以查看到本系列所有内容。加我个人微信,请在微信中回复“李艺微信”。祝你学有进步。如果发现好的技术文章,请向我推荐,谢谢。

相关文章

网友评论

    本文标题:「微信小程序」32,如何使用css实现一个简单的顶部对齐?

    本文链接:https://www.haomeiwen.com/subject/cwtdxxtx.html