Flex布局实战（三）

        由于网格布局相对简单，只需要理解项目属性flex即可。因此小编打算基本网格布局和百分比布局一起进行讲解，讲解的方式是先上效果图，然后在讲解flex属性和使用。

开始讲解网格布局

网格布局

基本网格布局：

百分比布局：

---

有了上面的效果图后，我们先理解下项目属性flex。

flex属性：是flex-grow、flex-shrink和flex-basis的组合，默认值为0 1 auto。后两项可选。

    其中flex-grow默认值为0，表示不放大，如某项目为>0的整数，按对应比例将容器划分等分，按照自己的值放大。

        例如：容器中有三个项目，其中一个的项目A为flex-grow为2，其他为1，则分四等分，A占二等分，其他分别占一等分。

    

    其中flex-shrink默认值为1，表示空间不足，则等比缩小，如某项目A为flex-shrink的值为0，其他为1，当空间不足时，项目A不缩小。

   

---

现在开始示例化，讲解基本网格布局和百分比布局。

基本网格布局

实现的HTML和CSS样式：

对应的CSS样式：

实现思想：

    分别定义了class为grid的div作为容器，class为grid-cell的div作为项目，其中主要是实现每行为2列、3列和4列的场景，定义项目的属性为flex:1;表明容器中的项目等分列，所以就实现了上面的效果。

百分比布局

实现的HTML和CSS样式：

对应的CSS样式：

实现思想：

    分别定义了class为grid的div作为容器，class为grid-cell的div作为项目，并对项目中部分标签添加指定的样式，此处需要理解flex-basis，会先按照指定的比例先分配好值的空间，剩余的空间在给其他项目分配。

结尾

        今天网格布局的内容不多，主要是理解项目属性flex的使用，如大家有疑问可以留言给我，或者自己百度查询下。

                        未完

今天就到这里，下一篇流式布局