flex布局

一、如何开启flex布局

开启flex布局需要在其父元素css里设置display：flex；开始flex定位之后默认主轴是x也就是flex-derection:row; 事实上它除了有row|Colum|row-reverse|colum-reverse；分别是以x轴为主轴，以y轴为主轴，以x轴为主轴并且翻转、以Y轴为主轴并翻转。

二、如何控制flex子元素排布（以下的属性需要设置在父元素里面）

1、主轴上面的排布形式：

justify-content：space-between；子元素先左右两边贴边排布结束之后中间部分平分剩余部分。

justify-content：space-around；所有子元素平均分配父元素主轴空间。

justify-content：flex-center；所有子元素在主轴居中对齐。

justify-content：flex-start；所有子元素弹性项目向行头紧挨着填充。

justify-content：flex-end；所有子元素弹性项目向行尾紧挨着填充。。

2、侧轴上面的排布形式（align-content是多行排布，align-items是单行的排布）

align-content：（其属性和主轴类似）；

align-items：；

三、折行flex-wrap：wrap；

事实上父元素开始flex布局之后，无论主轴有多少个子盒子，他都会一直沿着主轴排布下去，不会自动折行。需要折行需要依靠flex-wrap：wrap；

四、给子元素单独设置排布样式怎么弄呢。

一般有这两个属性：order：；这个是可以更换子元素的排布顺序。

align-self：；和父元素里的属性值差不多，不过这是单独设置自己的。

好了，就看到这里叭 ，你差不多要自己实践敲敲代码了叭。