详细讲解微信开发的flex布局（微信小程序的Flex布局）

微信小程序的页面布局采用flex布局。Flex layout是w3c在2009年提出的一种新方案，可以简单、完整、快速地实现各种页面布局。Flex布局提供了容器中元素的对齐、方向和顺序，甚至它们可以是动态的或大小不定的。flex layout的主要特点是可以调整其子元素，并在不同的屏幕尺寸中以最适合的方法填充适当的空间。

灵活布局

灵活布局的特点:

向任何方向扩展，左、右、下、上。

可以在样式层更改和重新排列顺序。

主轴和副轴配置方便。

子元素的空间拉伸和填充

沿容器对齐

微信小程序实现Flex布局，简单介绍一下Flex布局在微信小程序中的使用。

该伸缩容器设置有

显示:块被指定为块容器模式，并且总是以新行显示。微信小程序的视图容器（view、scroll-view和swiper）默认都是display:block。

Display:flex:指定行容器模式，并在一行中显示子元素。您可以使用flex-wrap属性来指定它是否换行。flex-wrap有三个值:nowrap（不换行）、wrap（换行）和wrap-reverse（换行下面的第一行）。代码使用显示:块（默认值）:

& lt视图class = & quotflex -世界其他地区style = & quot最大-宽度:90% & quot；& gt& lt视图class = & quotflex -视图-项目& quot& gt1 & lt/view & gt；& lt视图class = & quotflex -视图-项目& quot& gt2 & lt/view & gt；& lt视图class = & quotflex -视图-项目& quot& gt3 & lt/view & gt；& lt/view & gt；显示效果:

街区

更改为显示:flex的显示效果:

弯曲

您可以从渲染图中看到block和flex之间的差异，以及子元素视图是以直线（block）还是直线（flex）显示。

具有主轴和侧轴灵活布局的伸缩容器可以向任何方向布局。默认情况下，容器有两个轴:主轴和横轴。主轴的起始位置为主起始，主轴的终止位置为主结束，主轴的长度为主尺寸。同样，侧轴的起点是侧轴十字起点，终点是侧轴十字终点，长度是侧轴十字尺寸。详情见下图:

flex -方向

注意主轴不一定是从左到右，副轴不一定是从上到下。主轴的方向由flex -方向属性控制，该属性有四个可选值:

行:从左到右的水平方向是主轴。

Row-reverse:从右到左的水平方向是主轴。

列:从上到下的垂直方向是主轴。

从下到上反转的第3列+的垂直方向是主轴。

如果水平方向是主轴，则垂直方向是副轴，反之亦然。四个主轴方向设置的效果图:

示例图

图中的示例显示了使用不同flex -方向值的区别。实例代码:

& lt视图& gt& lt视图class = & quotflex -世界其他地区style = & quot显示器:flexflex -方向:排；"& gt& lt视图class = & quotflex -视图-项目& quot& gt1 & lt/view & gt；& lt视图class = & quotflex -视图-项目& quot& gt2 & lt/view & gt；& lt视图class = & quotflex -视图-项目& quot& gt3 & lt/view & gt；& lt/view & gt；& lt视图class = & quotflex -列style = & quot显示器:flexflex -方向:列；"& gt& lt视图class = & quotflex -视图-项目& quot& gtc1 & lt/view & gt；& lt视图class = & quotflex -视图-项目& quot& gtc2 & lt/view & gt；& lt视图class = & quotflex -视图-项目& quot& gtc3&lt。/view & gt；& lt/view & gt；& lt/view & gt；操作效果:

flex -方向

对齐子元素有两种方式:

justify -内容有五种可选对齐方式:

flex -启动主轴开始对准（默认）

flex -端轴端点对齐

中心位于主轴的中心。

Space-between两端对齐，除了两端的子元素分别靠在两端的容器上之外，其他子元素之间的间隔相等。

每个子元素之间的距离周围的space -相等，两端的子元素与容器之间的距离与其他子元素之间的距离相同。justify -内容的对齐与主轴的方向有关。下图以flex -方向为行，主轴从左到右，描述JStify -内容的显示效果:

调整-内容

align -项目表示在侧轴上对齐:

拉伸填充整个容器（默认）

flex -启动侧轴的起点对齐。

flex -端侧轴的端点对齐

中心位于横轴的中心。

基线与子元素的第一行文本对齐。

align-tiems设置的对正模式与横轴方向相关。下图中，flex -方向为行，横轴方向为从上到下，描述了align -项的五个值的显示效果:

aign -项目

通过主轴和侧轴的方向并设置它们的对齐方式，可以实现大多数页面布局。

【相关建议】

1.下载微信微信官方账号平台源代码。

2.下载小猪CMS Lifelink O2O系统v2.0独家版

3.pig CMS（pig CMS）微信营销系统V8.52品好商城二次开发特别版

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：详细讲解微信开发的flex布局（微信小程序的Flex布局） https://zhujicankao.com/114296.html