传统的布局实现方式很麻烦，必须通过多个属性协同实现。 随后，flex柔性布局问世后，通过其他方式实现的布局可以在flex布局中实现得更简洁。 本节通过几个简单的示例介绍flex布局的基本使用方法。
首先创建一个新的空白页，在一个view中放入三个文本。 将display:flex添加到view样式时，view将设置为柔性布局，组件默认按从上到下、从左到右的顺序排列。
！ - index.html-- view class=' out ' text class=' in1 ' html/texttext class=' in2 ' CSS/texttext class=' in3 ' javass background: #88888880； display :闪存； }.in1 { width:48px； height: 28px； background :灯光绿色； }.in2 { width: 44px； height: 24px； background :灯光yellow； }.in3 { width: 80px； height: 32px； background :灯光蓝； }为了便于区别，设定了不同的背景色和不同的宽度、高度。 如图所示，缺省情况下，组件按顺序排列在view的左上角。
另一方面，可以使用改变排列方向的flex-direction属性来控制组件在view中的排列方向。 其默认值为flex-direction:row，横向排列； 现在纵向排列，只需添加flex-direction: column；
/* index.wxss *.out { height 3360200 px； width: 200px； background: #88888880； display :闪存； flex-direction :列； }效果是，
将它们横向相反排列，设置flex-direction: row-reverse即可； 效果是，
纵向排列，只需设置Flex-direction :列还原； 效果是，
二、改变对齐方式为了便于说明，首先定义两个名词
主轴：排列方向的轴
交叉轴：与排列方向垂直轴
主轴和交叉轴取决于上面flex-direction的取值。 例如，在横向阵列中，主轴是横向的，而相交轴是纵向的。 在纵向阵列中，主轴是纵向的，而相交轴是横向的。
2.1更改主轴对齐方式使用justify-content属性可以控制零部件在主轴上的对齐方式。 默认值为justify-content: flex-start； 左对齐。 现在，只要把它们排在右边，添加justify-content: flex-end即可；
/* index.wxss *.out { height 3360200 px； width: 200px； background: #88888880； display :闪存； justify-content: flex-end； }效果是，
只需将它们居中，安装justify-content: center； 效果是，
将它们分散均匀排列，两端无空白，设置justify-content 3360 space-between； 效果是，
将它们分散均匀排列，两端留出空白，设置justify-content : space-around； 效果是，
2.2更改相交轴对齐方式使用align-items更改组件在相交轴上的对齐方式。 常用的值有四个： flex-start、flex-end、center和baseline，在效果图中很容易理解。
首先尝试默认的对齐项目：灵活开始； 中选择所需的族。 组件沿相交轴的起点对齐。
/* index.wxss *.out { height 3360200 px； width: 200px； background: #88888880； display :闪存； align-items: flex-start； }效果是，
修正为对齐项目：灵活结束； 中选择所需的族。 指示部件沿相交轴的终点对齐。
修改为对齐项目：中心； 中选择所需的族。 指示部件沿相交轴的中心对齐。
最后的对齐时间：基线；表示要沿组件中的第一行字符对齐。
2.3联合使用justify-content和align-items可以实现很多效果，如同时位于横向和纵向中央。
/* index.wxss *.out { height 3360200 px； width: 200px； background: #88888880； display :闪存； 内容：中心； align-items3360中心； }效果图：
例如，如果你希望组件在右下角，
/* index.wxss *.out { height 3360200 px； width: 200px； background: #88888880； display :闪存； justify-content: flex-end； align-items: flex-end； }效果图：
总结：
1.flex-direction :设定排列方向
row水平对齐，默认
行反转沿横向相反排列
column是竖着排的
列反转在纵向上反向排列
2.justify-content :设置组件如何与主轴对齐
flex-start为左，默认flex-end为位于右center中心的space-between方差平均数组，两端没有空白的space-around方差平均数组，两端为空白3.align-items :组件
flex-start沿相交轴的起点对齐，缺省flex-end沿相交轴的终点对齐，center沿相交轴的中心对齐，baseline沿部件中第一行的文本对齐