Question

神奇的flex布局

Answer 1

在最近的学习中，接触到了flex布局，发现flex很好用，所以今天决定写一写关于flex的一些内容。

在之前的探索中，当一列有很多元素的时候，我通常是通过修改元素的百分比来进行排布。但是当某些时候（例如需要给他们添加等间距时会撑到下一行，或者定位到一定的位置）会很难办。

这时候就要用到

先来看看这个整体属性。它的语法如下

来看看各个属性都是什么意思吧

看完这个表之后，我们来细讲一下各个属性。

flex-grow用来规定项目将相对于其他flex的项目进行扩展的量。 如果元素不是flex盒对象的元素，则该属性不起作用。

语法：

这个属性可以在flex元素的子元素下设置，设置后的值是相对于同级子元素来说的。利用这个属性，我们可以很方便的排布出各种比例宽度的排版。

这个属性的值就是相对于grow将数字变为倒数。例如在flex-grow中

表示的是将该元素设为同级flex元素的3倍

那么

则是将该元素设为同级元素的三分之一。

这个就不多讲了，和flex-grow差不多。

flex-basis属性用于设置或检索flex盒伸缩基准值。

如何理解呢？差不多就是有一堆flex的元素，你只想要调整其中一个的宽度（例如第四个），就可以使用d

来调整。

这个属性用于规定flex项目的方向。

这个属性可以很便利的将一行显示的元素变为竖向的一列，或者将元素倒置过来。你也可以通过嵌套div实现某部分倒置或者在某处拐弯。

这个属性让flex元素在必要的时候拆行（碰到浏览器边界或者div边界。）同时横轴的方向决定了新行堆叠的方向。

这个属性是flex-direction和flex-wrap属性的复合属性。语法如下

由于这两个属性的值已经说过，所以就不列表显示了，只要注意使用顺序就好了。