Flex布局实战（三）

客官°小女子只卖身不卖艺 2023-06-27 12:39 7阅读 0赞

![format_png][]

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

![format_png 1][]

开始讲解网格布局

![format_png 2][]

网格布局

基本网格布局：

![format_png 3][]

百分比布局：

![format_png 4][]

--------------------

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

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

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

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

![format_png 5][]

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

![format_png 6][]

--------------------

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

基本网格布局

**实现的HTML和CSS样式：**

![format_png 7][]

对应的CSS样式：

![format_png 8][]

**实现思想：**

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

**百分比布局**

**实现的HTML和CSS样式：**

![format_png 9][]

对应的CSS样式：

![format_png 10][]

**实现思想：**

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

结尾

![format_png 11][]

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

未完

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

![format_png 12][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfZ2lmL294QUhld2FMMnJpYWh6cWFRekFiNkR4VmJaMnlESmp0NkVWdkp3OGlhYU5vUXVRUk1OVEFCSHc1dkNpYjBMOGRSTm96TUxSRmlhanRBTWxseDIwRTVpYTFzMXcvMA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJnRW9kY2s5ZTBrZ1BkQWVNQ3J2R2dYakZKaGZBUkdzS1k0MUFaWTdlSHVxUEVGcHdlMGsxQ0ZSSDJ6djBWTjY4RTgyemF4SHc3TlZBLzY0MA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJnRW9kY2s5ZTBrZ1BkQWVNQ3J2R2dYRW9CbFljeDRpY1prZU9JVktLdVhKSzFDcnB0eVl4TGh5SzRlZVdHR2JrMVlEOXpzSGdCd1JwUS82NDA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJpYTdod1Z3aGlheTN4SGFQQ1Z4ZkVDWFVyYlpXU3hXZWNkSmNaMnlERGJuaWJROERkNHdjVThDM1ZkMktmR1NGTWtVNWFmSHd2b3JpYmZjQS8w?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJpYTdod1Z3aGlheTN4SGFQQ1Z4ZkVDWFVPdmtHem05RmxQRUJCdjgzMUxxZk95cTk0MWVzWWtTNjBCRlRGRnFBMnlFakpHVjdiMVk0ZEEvMA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqUjBZWkpqck1xUEVidmljWXdOdWhPcGxRb3pFV0I2ZndJWTNoOWpzd0ZtZXIwWlpQUExzZjVoa0dPUWljZVg3WndsOE5vckRpY2lheFBBUS8w?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqUjBZWkpqck1xUEVidmljWXdOdWhPcFRURVFUWkIwMXpoTUdnYnNNaWFTY3FXWVc1OEhoSEZqVzZTRFhRTWtvdFJYRjNKRkhnODVyQ2cvMA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJpYTdod1Z3aGlheTN4SGFQQ1Z4ZkVDWFVWbWhoZmlhUnZVbUZ0Q0NlTXlWd2xFTUtBMkNpYVNFYW14Q2RHaGp5VWlhblpid2ljZmliemhyM0FqZy8w?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJpYTdod1Z3aGlheTN4SGFQQ1Z4ZkVDWFVoaWNJNmliSkczMXBMNHE1T0JvelZhT2liTmRaMVMzUTl5MVF6eFJlSFYyYzU0WmhoTGRvNUlkbmcvMA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJpYTdod1Z3aGlheTN4SGFQQ1Z4ZkVDWFVQZ0RHaHZpY3FpY2ljVG5XZ3RDNHAzSDNEWkpDNmsyYmNnTHJ3YUlmYmlibFJpYWwyTDVjZzhxa2xIUS8w?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJpYTdod1Z3aGlheTN4SGFQQ1Z4ZkVDWFU4YW55RXpidmpucjFBZDJpYnlhOURYQWgwcld6b2Q5M0NTVzlQN2RxaDhvU2liUjlQazQ3c3ZmZy8w?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJnRW9kY2s5ZTBrZ1BkQWVNQ3J2R2dYM0RpYlFMbHdnQWliMUpjN1VEOWZ2cEhBOXQxRWVnU3dFNzdJMVB0aGF3UXZDQXVPdjBSZEE2NncvMA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfZ2lmL294QUhld2FMMnJqSXZ2dmFwVzVFVm0wWEMzV2xUMXg2UWdQUUJOZXczQndDalh4Qnhya1VEbHBjd09VeFB4eVVUSTZpY1RpYUhzZzVONG81emRUcFRqWVEvMA?x-oss-process=image/format,png