Flex 布局教程

Flex布局教程

最近在学习微信小程序，然后微信小程序mina框架 推荐的布局方式是flex布局，所以来学习下基础的知识。它主要支持的浏览器为如下：

1、Flex布局的定义

flex是Flexible Box的缩写，也就是叫“弹性布局“,主要是用来为盒装模型提供最大的灵活性。
任何容器都可以定义为flex布局

.box{
    display:flex;
}

注意:webkit内核的浏览器，必须加上-webkit前缀

.box{
    display:-webkit-flex;/* Safari */
    display:flex;
}

2、基本概念

使用flex布局的方式布局，整个布局是一个容器 flex container，里面的元素都被称为容器成员，成为flex item;

容器默认两个 存在两个轴，分别为从左==》右的主轴 ，以及从上==》下的交叉轴

3、属性

3.1、设置在容器的