微信小程序flex布局的基础使用

flex的基本格式

.box{
display:flex; //容器指定为Flex布局
flex-direction:row; //定义主轴方向，row为从左至右
justify-content:flex-start;//定义主轴元素的排列方式，flex-start表示为头开始排列。
align-items:center;//定义侧轴元素的排列方式，center为居中对齐。
flex-wrap:wrap;//定义当元素排列超过指定宽度时，是否自动换行。
}

flex的应用

Flex 是一个高效、免费的开源框架，可用于构建具有表现力的 Web应用程序，这些应用程序利用Adobe Flash Player和Adobe AIR, 可以实现跨浏览器、桌面和操作系统。虽然只能使用 Flex 框架构建 Flex应用程序，但Adobe Flash Builder™（之前称为 Adobe Flex Builder™）软件可以通过智能编码、交互式遍历调试以及可视设计用户界面布局等功能加快开发。（源自百度百科）

flex的基本属性

display属性

display的含义便是指定容器为flex布局，如：display：flex。
当然还可以对行内元素使用Flex布局，如：display:inline-flex。
如果不是很理解的话可以只使用display:flex，因为这个就能解决绝大部分实际问题了。

flex-direction属性

flex属性分为4个：
row:定义主轴为从左到右。
row-reverse:定义主轴为从右到左。
column:定义主轴为从上到下。
column-reverse:定义主轴从下到上。
见下图：

注意:在定义主轴的方向时，最好先观察怎样定义主轴才能更加简单的排列元素。

justify-content属性

justify-content属性有5个值:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
flex-start:主轴起点对齐。 　　　　　　　|1 2 3 　　　　　　　|
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
flex-end:主轴结束点对齐。　　　　　　｜　　　　　　1 2 3 ｜
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
center:主轴居中对齐。　　　　　　　　｜　　　１２３　　　｜
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
space-between:主轴两端无间隔对齐，间隔相同。｜１　　　２　　　３｜
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
space-around:两端间隔对齐，间隔相同。｜　１　　２　　３　｜

align-items属性

与上面的justify-content属性值一致，相信读者能通过自己的思考得到侧轴赋予上述值得到得作用。

flex-wrap属性

flex-wrap属性有三个值:
nowrap:（系统默认值）不换行；
wrap：换行；
wrap-reverse：换行，第一行在下方。（从下方开始排列）

至此，flex得基础用法用上述属性即可实现。但flex还有更加高级的用法，希望读者在阅读完此篇后继续学习flex得高级用法！