个人理解分享之flex布局快速入门

随着流量像移动端的偏离，我手上的项目大多也都是移动端的为多，移动端无论是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

当然属性里面还有对应的值，都是语义化的看一下就明白了，大家自行去了解吧。