flex项目尺寸的增长和缩小及PC端通用布局案例
flex项目尺寸的增长
flex项目的增长，使用
flex-grow来实现。
使用前提：当flex项目总宽度或总高度小于父弹性盒子时使用
- 具体格式：
.item{/*1为增长因子，可以为小数*/flex-grow:1;}
- 具体算法：
参考代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>设置项目在主轴空间上的增长因子</title><style>.container {width: 300px;display: flex;}.container > .item {width: 60px;/*增长因子为0不放大*/flex-grow: 0;/*flex简写，=flex-grow:1，增长因子为1，根据剩余空间计算后放大1份*/flex: 1;/*auto自动，即默认为1*/flex: auto;}.container > .item:first-of-type {/* 第一个项目放大2份*/flex-grow: 2;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body></html>
计算方法：
- 首先求出剩余空间大小，根据第9行
width: 300px;、第13行width: 60px;，我们得出剩余空间大小为：300-60*3=120px。 - 根据项目总数算出每份大小值，根据代码得出项目因子总和，此案例中第一个项目的因子为2（从第21行、23行代码中得出），第二个项目和第三个项目的因子为1（从第19行代码得出），所以每份的大小值为：120/4=30px。
- 最后根据
flex-grow的值计算出每个项目在原始尺寸的基础上再增长多少，如第23行代码flex-grow: 2;,即可以算出，第一个项目（.container > .item:first-of-type）的结果尺寸为：60px+(30px*2)=120px。
运行效果图：
flex项目尺寸的缩小
flex项目的增长，使用
flex-shrink来实现。
使用前提：当flex项目总宽度或总高度大于父弹性盒子时使用
- 具体格式：
.item{/*1为缩小因子，可以为小数*/flex-shrink:1;}
具体算法：
参考代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>设置项目在主轴空间上的收缩因子</title><style>.container {width: 300px;display: flex;}.container > .item {/* 收缩因子有效的前提是， 所有项目宽度之和必须大于主轴上的当前空间大小 */width: 160px;/* 不收缩 */flex-shrink: 0;/* 收缩, 默认是1，允许收缩填充主轴全部空间 *//* 收缩因子之和: 1 + 1 +1 = 3 *//* 180 / 3 = 60,每个项目需要消化掉60 */flex-shrink: 1;}.container > .item:first-of-type {/* 收缩因子之和: 0.5 + 1 + 1 = 2.5 *//* 180px / 2.5 = 72px *//* 第一个项目： 160 - (72*0.5) = 124px *//* 第二个项目, 第三个项目: 160 -72 = 88px */flex-shrink: 0.5;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body></html>
运行效果图：
计算方法与增长因子类似，只是基础值是因子的总宽度或总高度减去父元素宽度或高度值，份数计算方法一致。
重设项目的基础尺寸
flex项目的基础尺寸，使用
flex-base来实现。
具体代码：
flex-basis: 80px;
实现重新设置项目的尺寸，优先级高于项目的原始尺寸。
flex实现PC通用布局案例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>PC通用布局</title><style>/* 初始化 */* {margin: 0;padding: 0;box-sizing: border-box;}a {color: #666;text-decoration: none;}/* 将body转为flex */body {min-width: 680px;display: flex;/* 主轴垂直方向,不换行 */flex-flow: column nowrap;}header,footer {height: 50px;border: 1px solid #000;}/* 将页眉转为flex */header {display: flex;/* 所有项目在交叉轴方向上居中显示 */align-items: center;}header > a {flex: 0 1 100px;text-align: center;}/* Logo */header > a:first-of-type {margin-right: 50px;}header > a:last-of-type {margin-left: auto;}/* 鼠标悬停时忽略logo */header > a:hover:not(:first-of-type) {color: coral;}.container {min-height: 400px;margin: 10px auto;display: flex;justify-content: center;}.container > aside,.container > main {border: 1px solid #000;padding: 10px;}.container > aside {flex: 0 0 200px;}.container > main {flex: 0 0 600px;margin: 0 10px;}footer {display: flex;flex-flow: column nowrap;text-align: center;}</style></head><body><!-- 页眉 --><header><a href="">LOGO</a><a href="">首页</a><a href="">栏目1</a><a href="">栏目2</a><a href="">栏目3</a><a href="">登录</a></header><!-- 主体 --><div class="container"><!-- 左边栏 --><aside>左边栏</aside><!-- 主体内容区 --><main>主体内容区</main><!-- 右边栏 --><aside>右边栏</aside></div><!-- 页脚 --><footer><p>php中文网 ©版权所有 (2018-2022) | 备案号:<a href="">皖ICP-1*********</a></p><p>中国.合肥市***** | 电话: 0551-888888**</p></footer></body></html>
运行效果：
