css横向排列和弹性盒子布局 display:flex

编写css时，我们经常需要将元素横向排列在一行，通常由以下三种元素可以实现：

1、float ：

可以使用float偏移到一行，如：同时使用float:left即可偏移在同一行的左边，如下：

也可以一个模块使用float:right，一个模块使用float:left使一左一右排列，可以达到我们要求的效果，但是！！！有一个问题--------他们的父级模块会因为子模块的浮动而使主体没有高度。通俗来讲，我们一般是用子模块来撑起父模块的高度，但是，当你的子级元素使用了float后，相当于浮动了起来，使不能够撑起父模块的高度的，所以此时，父模块容易“消失”。
如何解决这个问题呢，我们可以给父级元素加上一个**overfloat:hidden;**属性，这个的意思就是将超出的部分隐藏起来，利用这一属性，我们可以解决此问题。

2、display:inline-block;

内联块级元素，它可以使模块排列在同一行，但是这样排列的模块容易在模块间出现小缝隙，如下：

可以看到，模块间有一个小小的缝隙，有问题，但可以解决。
我们可以在父模块加上font-size:0;将其子元素的字号设为0，再再子元素内部规定他们的字号因为这些子模块书写时，会换行（当然不会换行就不会出现这个问题，但代码排列在一行太丑），换行后相当于在两个某块间产生了一个空格的字符空袭，所以我们将字号设为0，就可以解决这个问题，但，还要在子元素重新设置字号，也是不太好，所以，下一种，是我认为最好的方式！！

3、弹性盒子！！

display:flex 弹性盒子内的属性有很多，我就不在此一一列举，有兴趣的同学可以去https://www.w3school.com.cn来查一下，很是详细。
那么我们来简单说一下他的使用，其实就是设置父级元素为一个盒子，让自己元素在盒子里排列，通常我用一般就会用到这2个属性：(在父级中添加)
（先在父级模块内加入display:flex）

flex-wrap:warp; 它的意思是元素横向排布时可以换行，如果我们不设置的话，它默认是不换行的，会生生把你的元素挤在一行，有时候看着舒服，有时候就不一定了。。。。

justify-content:space-between; 它的意思是子级模块排列在父级模块是产生的间隙将会被均匀排布在模块中间，是这个效果：

所以还是很方便的有木有，尤其是元素多的时候。你也可以使用
justify-content:center; 他是将元素都挤在中间，是这样婶的：

弹性盒子的妙用还有很多，在这里我就不列举啦，有特殊需求的同学可以百纳博客，广搜百度，相信终会有属于你的一款~