<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[kun_96的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/kun_96</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; kun_96]]></copyright><item><title><![CDATA[Grid网格布局笔记]]></title><link>https://blog.youkuaiyun.com/kun_96/article/details/106464957</link><guid>https://blog.youkuaiyun.com/kun_96/article/details/106464957</guid><author>kun_96</author><pubDate>Mon, 01 Jun 2020 01:44:35 +0800</pubDate><description><![CDATA[Grid网格布局笔记
常用的三种布局方式对比
1.传统布局方式
利用position属性 + display属性 + float属性布局，兼容性最好，但是效率低，麻烦！
2.flex布局
有自己的一套属性，效率高，学习成本低，兼容性强！
3.grid布局
网格布局（Grid）是最强大的 CSS 布局方案。但是知识点较多，学习成本相对困难些，目前的兼容性不如flex好！
容器属性
1.grid-template-columns
2.grid-template-rows
a. 想要多少行或者列，就填写相应属性值]]></description><category></category></item><item><title><![CDATA[关于flex盒模型里项目放大比例的计算规则（flex-grow和flex属性）]]></title><link>https://blog.youkuaiyun.com/kun_96/article/details/106314757</link><guid>https://blog.youkuaiyun.com/kun_96/article/details/106314757</guid><author>kun_96</author><pubDate>Sun, 24 May 2020 16:02:44 +0800</pubDate><description><![CDATA[关于flex盒模型里项目放大比例的计算规则（flex-grow和flex属性）
flex-grow属性：
我们在使用flex布局的时候，遇到需要项目放大的问题，一般都是使用flex-grow属性来设置，规则如下：
flex-grow的默认值为0，即如果存在剩余空间，也不放大，负值无效。
当给项目flex-grow属性设置一个非负数值时，该项目将分配剩余空间而放大。
此处剩余空间指 容器宽度 减去 一行内所有项目宽度之和。
每个项目按flex-grow属性的值的比例来分配剩余空间。

举个例子，这里容器ul的]]></description><category></category></item></channel></rss>