umtheme随着流量向移动端的偏离，经常会碰到一些移动端项目。移动端，无论是app还是小程序，或者一些移动端框架，基本上都有使用flex布局，对于长期使用传统盒子模式的前端人员来说可能不太习惯，尤其是定义为flex布局的各种位置调整，更是让人头疼。既然这么多人都在用，我们还是有必要掌握的，让我们进入正题。
flex布局简单的理解就是两个概念:一个是容器，一个是元素
控制容器的属性有六个
flex-direction flex-wrap flex-flow justify-content align-items align-content
flex-direction 设定主轴的方向，默认就是横向排列
flex-wrap 默认是不换行的，也就是会一直按你设置的主轴（flex-direction）排列，元素放不下了就会被压缩
flex-flow 是flex-direction和flex-wrap的简写，默认 row nowrap即横向排列不换行。
justify-content 内部元素在主轴上的对齐方式
align-items 定义元素在交叉轴上（和主轴垂直的方向）如何对齐。
align-content 定义了多轴线（大于等于2行）的对齐方式（把内部所有元素看作一个整体）。
容器的属性就是这六个，其实也就五个，简写记不记无所谓，需要搞清楚的就是主轴的概念以及容器（其实就是盒子），比如暂且可以理解为横向排列，需要垂直居中就用align-items，需要换行就用flex-wrap，需要内部元素都垂直就用align-content。
既然我们可以对外围的容器盒子操作，那当然也可以对里面具体的元素进行操作。
操作元素的属性同样有六个
order flex-grow flex-shrink flex-basis flex align-self
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 定义项目的放大比例，默认值为0，默认不会放大。
flex-shrink 定义了项目的缩小比例，默认为1，默认会缩小。
flex-basis 这个比较绕人，其实就是宽度或者高度（根据你的主轴）优先级高于width,height，设置了固定值就不会参与容器内剩余空间的分配
flex 属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
align-self 属性单独设置元素的对齐方式，比如横向排列align-items是居中我想让其中一个元素居下，那我就设置align-self:flex-end
关于css之flex布局就分享到这里，希望对大家能够有所帮助。
