一篇老文，小程序入门时的一些探索。Flex布局是一种非常灵活方便的布局方式。目前主流的现代浏览器基本都实现了完整的flex布局。支持。在微信小程序中，IOS端使用的渲染引擎WKWebView和Android端使用的X5也支持Flex。因此，为了让布局在小程序开发中更加方便，有必要多了解Flex布局在小程序中的使用。本文将介绍Flex布局的各种属性，直接使用wxss写实例。运行环境是小程序的开发者工具。弹性布局的基本概念弹性布局直接应用于弹性容器，布局的对象是容器中的各个项目元素（“项目”）。项目元素布局的核心概念在于两条轴线：主轴和横轴。通过控制项目元素在主轴和横轴上的排列来进行布局。弹性方向）；另外，一个flex容器可以包含一个flex容器，即可以有多个主轴和交叉轴。flex容器有6个属性：flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-direction设置主轴方向：row→(default)row-reverse←column↓column-reverse↑flex-wrap规定如果container主轴方向不能容纳所有物品。主轴上的item如何换行（当flex-direction为column和column-reverse时为“column-changing”）：nowrap（默认），即不换行，每个item都会接触挤压使宽度变小wrap：换行，一般是从上到下wrap-reverse：换行，只是每行在横轴上的排列方向和wrap与flex-flowflex-direction和flex-wrap的简写相反，默认值为“行换行”。justify-content所有项目都在主轴上对齐：无（默认）center：以主轴为中心flex-start：主轴起点对齐：每个项目在两侧等距。align-items所有item都在横轴上对齐：stretch（默认），即当item设置为autosize时，在横轴中心的方向上拉伸以填充容器的大小：onthecrossaxis居中flex-start：对齐横轴的起点flex-end：对齐横轴的终点baseline：每个item第一行文本的基线对齐align-content定义了多个main的对齐方式轴，在主轴上折叠时一般会出现多个主轴：stretch（默认），即当size为auto时，主轴上的item会被拉伸填满整个横轴。center:以横轴为中心flex-start:对齐横轴的起点flex-end:对齐横轴的终点space-between:对齐两端，item之间等间距space-around:等间距在每个item的两侧Flexitempropertiesitemproperties共有6个：orderflex-basisflex-growflex-shrinkflexalign-selforder定义item的序号；默认为0，但可以为负数：flex-basis是Flex项目自适应缩放前项目占用的主轴空间的基值。默认值为auto，也就是item的原始大小：flex-grow注意这个属性指定了item占剩余空间的比例。这里有两个关键点：容器在主轴上必须有剩余空间。此属性用于剩余空间。carve-up，即项目最终大小为每个项目的flex-basis大小，加上carve-up得到的大小，默认为0，即如果有剩余空间，则不再增长（grow)，并且不能为负：flex-shrink:Insufficientspace项目的划分比例对shrinkageshare还有两个关键点：容器主轴上的空间不足以容纳所有的项目，并且空间不够使项目收缩，这个属性就是收缩份额的划分，也就是项目最终的大小是每个项目的flex-basis的大小，收缩份额减去除法得到的默认为1，即空间不足时项目会收缩，不能为负数：flexflex-grow、flex-shrink、flex-basis的简写。默认值为“01auto”，另外还有两个值：auto，即“11auto”，none，即“00auto”。align-self允许一个项目与其他项目具有不同的横轴对齐方式，主要用于覆盖align-items属性。默认值为auto，即继承父元素的align-items属性。如果没有父元素，相当于stretch；其他值与align-items的效果相同。综上所述，flex布局也叫弹性布局。我个人对所谓“弹性”的理解，主要体现在flexitem的自拉伸上。主轴上的自拉伸主要由flex-grow和flex-shrink控制，横轴上的自拉伸体现在align-*属性的默认值拉伸上。一些注意事项某些属性对Flex项目无效：column-*属性、浮动和清除、垂直对齐。在flex容器中使用float会使flex布局无效。请参阅Flex布局教程
