Flex布局是一种强大而灵活的CSS布局方式，通过设置容器的display为flex，可以让子元素按照一定的规则自动分配空间。常用的一些技巧包括：使用flex-direction设置主轴方向，使用flex-wrap换行排列，使用justify-content和align-items调整子元素沿主、交叉轴的对齐方式，使用flex-grow和flex-shrink控制子元素的伸缩性，使用order调整子元素的显示顺序，使用flex-basis设置子元素的初始尺寸等。
这种布局方式非常适用于响应式设计，并且能够简化页面布局的复杂性。
布局思路是这样的：
1、首先给header和footer一个固定的高度。
2、然后记得body的高度要设为100%，不然body是没有高度的。
3、body的布局设为flex，然后。
4、设置好了header和footer之后，我们就可以开始设计main部分的内容排列，因为body设置的排列是column，就是纵向排列，所以不能用align-items撑开main，只能在main里面设置flex: 1 1 auto将元素撑大，而且aside和article是有滚动条的：所以在main里面要设置隐藏浮动，不然会将屏幕撑到很大。
5、上面也可以看到main也是flex布局，所以aside和article成行排列，要使article撑满宽度，也要设置flex: 1 1 auto。最后再完善每块里面的细节布局。
Flex布局又称弹性布局，在小程序开发中比较适用。因此将Flex布局相关属性整理如下，搞清楚了这个布局，小程序开发的页面布局就不在话下了。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
div布局使用的是“盒模型”加上display、position和float属性，但是对于一些特殊的布局实现例如居中却是比较麻烦。
Flex 即为Flexible Box，指的是“弹性布局”，它可以为盒模型提供更加灵活的布局方式，例如，用flex可以优雅地实现水平竖直居中的布局。
CSS3 弹性盒( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
css3引入的flex布局优缺点：优点在于其容易上手，根据flex规则很容易达到某个布局效果。
缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。
flex意为“弹性布局”，为盒模型提供最大灵活性。任何一个容器都可以指定为flex布局。
采用flex布局的元素，称为flex容器。他的所有子元素自动成为容器成员，称为flex项目，简称项目。
容器默认存在两根轴：水平的主轴和垂直的交叉轴。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
首先是上下布局，标题栏 和主体 主体 分左右 导航 和内容 左边可用tabnavigator 右边viewstack 或者static
CSS Flex布局中的自动换行是通过flex-wrap属性实现的。当flex-wrap属性的值为wrap时，如果一行中的元素宽度之和超过了容器的宽度，那么多余的元素会自动换行到下一行。
具体实现原理如下：
1. 首先，Flex容器会根据flex-direction属性的值（默认为row）将子元素排列在一行上。
2. 当一行中的元素宽度之和超过了容器的宽度时，如果flex-wrap属性的值为nowrap（默认值），则子元素会缩小以适应容器宽度，否则会自动换行到下一行。
3. 换行后，Flex容器会根据flex-wrap属性的值将子元素排列在新的一行上。
4. 如果新的一行中的元素宽度之和仍然超过了容器的宽度，那么会继续自动换行，直到所有子元素都排列完毕。
需要注意的是，Flex容器中的子元素需要设置flex-basis属性或width属性，以便计算元素的宽度。同时，如果子元素的flex-grow属性值不为0，那么它们会根据剩余空间自动扩展，从而影响自动换行的效果。
在微信小程序开发中，布局是一个至关重要的部分。其中，flex布局是一种灵活且强大的布局方式，能够帮助开发者更轻松地实现页面布局。本文将深入探讨微信小程序中的flex布局，带您了解其优势、用法和实际应用。
flex布局是一种基于盒模型的布局方式，通过灵活的弹性盒子布局模型，实现页面元素的动态排列和对齐。在微信小程序中，可以通过使用flex布局轻松实现页面的响应式布局，适应不同屏幕尺寸和设备。
相比传统的布局方式，flex布局具有以下几个优势：
要在微信小程序中使用flex布局，首先需要在WXML文件中定义布局结构，并在WXSS文件中添加相应的flex布局样式。下面是一个简单的示例：
<view class="container">
<view class="item item1">Item 1</view>
<view class="item item2">Item 2</view>
<view class="item item3">Item 3</view>
</view>
在WXSS文件中添加flex布局样式：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}
通过以上代码示例，可以实现一个横向布局的flex布局示例，其中三个子元素平均分配父容器的空间，并且在父容器中居中显示。
flex布局在微信小程序开发中具有广泛的应用场景，特别适用于以下情况：
在微信小程序开发中，灵活运用flex布局能够提升页面布局的灵活性和美观度，使用户体验更加友好和舒适。通过本文的介绍，相信您已经对微信小程序中的flex布局有了更深入的了解，希望可以帮助您在实际开发中更好地运用flex布局，打造出更好的用户界面。
欢迎关注我们的博客，了解更多关于微信小程序开发的技术分享和最新动态！
flex-align：默认是设置垂直方向的对齐方式，值： start、end、center、stretch、baseline。
flex-pack：设置子元素之间如何分配多余空间，值：start、end、center、justify。
flex-direction：设置子元素的排列方式， row、row-reverse、column、column-reverse。
flex-wrap：设置子元素的是否自动换行和排列方向，值：nowrap、wrap和wrap-reverse。
-ms-flex：设置子元素弹性，参数，分别是正弹性、负弹性和默认大小。其实布局还有好多新玩法，你可以多看看相关的教程，比如说现在有个视频的系列名称叫做 《Buid New World》，里面有一集专门讲 CSS3 复杂布局形式
显示全部
收起
