关于flex属性的问题
2020-03-16 本文已影响0人
JiangHaoFunc
现在使用的布局方案是flex，常规用法就不说了。主要说下flex布局的元素的自适应宽度问题。
常用场景是：一个或多个元素固定宽度，其余自适应剩余宽度。
通常写法是 固定宽度的写为 width: 100px; 自适应的写为 flex：1；
（固定宽度也可以写 flex：100px）
flex这个属性是flex-grow，flex-shrink，flex-basis三个属性的简写，flex后面不设置3个参数的时候，代表以下意思：
- 设置数字：代表设置
flex-grow - 设置宽度：代表设置
flex-basis - none:
flex: 0 0 auto元素完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。 - auto:
flex: 1 1 auto元素自动伸长或缩短适应flex容器。 - initial：
flex: 0 1 auto元素只会缩短适应flex容器。 - 两个数字：第一个数字
flex-grow，第二个flex-shrink - 一个数字，一个宽度：第一个数字
flex-grow，第二个flex-basis
