flex布局模型——一个好用的布局神器

大家在初学css的时候，如果问大家如何将几个块级元素的盒子水平排列显示，大家肯定第一反应想到的就是float浮动这个属性，确实这个属性十分方便，它对我们PC端页面布局很有帮助，但是任何事物有好的一面就有坏的一面，它随之而来也会带来一些问题，因此在这里我们将介绍一种新的方法来代替float浮动进行页面布局，它就是flex布局模型。

一.flex布局介绍

1.flex布局的作用：

他是浏览器推荐的布局模型，基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。并且Flex布局非常适合结构化布局。

2.flex布局的设置方式：

父元素添加 display: flex，子元素可以自动的挤压或拉伸，并且子元素会自动水平排列

效果如下：

3.flex布局的组成部分：

①弹性容器(父元素）
②弹性盒子(子盒子)
③主轴(横向轴)
④侧轴(纵向轴)

二.flex布局的用法

1.调整弹性盒子在弹性容器之间的水平布局，我们使用主轴对齐方式来调整。

主轴对齐属性为justify-content，属性值与效果见下表：

它们的用法大致相同，这里我只通过代码演示其中一种，也是用的最多的一种，它就是justify-content:space-between;

我们只需要在父盒子里面添加

display: flex;
justify-content: space-between;

就可以实现如下效果：

也就是弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
其它的属性值大家可以自己去试一下，用法和justify-content:space-between;是一样的，都是在弹性容器里面添加属性值即可。

2.调整弹性盒子在弹性容器之间的垂直布局，我们使用侧轴对齐方式来调整。

侧轴对齐属性为align-items，属性值与效果见下表：

它们的用法都是一样的，这里只演示align-items:center;

效果如下：

align-items:center;的效果就是让弹性盒子在弹性盒子里面垂直居中。其他的属性值大家也都可以自己去操作一下，用法和align-items:center;是一样的。

3.伸缩比

属性 ： flex : 值;
取值 ： 数值(整数)

它添加在弹性盒子上，注意：它只占用弹性容器的剩余尺寸
代码演示：

效果如下：

4.控制单独某个弹性盒子在侧轴的对齐方式

我们发现align-items只能设置所有的弹性盒子的侧轴对齐方式，可如果当我们想要单独设置某个弹性盒子的侧轴对齐方式怎么办呢，这里就需要用到一个属性：align-self
它的属性值和align-items是一样的，用法和align-items不同，align-items是添加到弹性容器上的，但是align-self是添加到单独某个弹性盒子上的。效果也是和align-items对应的属性值效果一样。

总结：浮动虽然很好用，但是使用了浮动之后会遗留下来一些问题，比如说脱标问题，会导致页面布局出现偏差，当然也可以通过清除浮动来解决这个问题。但是相比flex布局模型，还是flex布局模型使用起来更加方便，但是同样flex布局模型也会有一些兼容性问题，因为毕竟它是css3新推出的属性。所以总的来说，浮动和flex布局模型都有它们的优点，同样也有它们的缺陷，因此我们一般在进行PC端页面布局的时候推荐使用浮动来进行布局，因为它的兼容性更好；而在进行移动端布局的时候，更推荐使用flex布局模型，因为它更加方便，并且移动端不需要考虑兼容性问题。