项目上的flex属性* { box-sizing: border-box; } /* 根字体10像素 */ :root { font-size: 10px; } /* 字号恢复到浏览器的默认值16px */ body { font-size: 1.6rem; } /* 1rem=100px */ /* flex容器 */ .container { display: flex; height: 20rem; border: 1px solid #000; } /* flex项目样式 */ .container > .item { padding: 1rem; background-color: rgb(190, 135, 235); border: 1px solid #000; /* flex属性有三个值 */flex-grow/flex-shrink/flex-basis /* 设置项目是否允许放大 */ /* flex-grow: 1; */ /* 当前有item4个项目，每个项目占据四分之一 */ /* 设置项目是否允许收缩 */ /* flex-shrink: 1 */ /* 设置项目在主轴空间上的大小 */ /* flex-basis:15rem */ /* flex-basis这个属性的优先级大于项目自身的width属性 */ /* 简写后：flex的三个属性：放大因子 收缩因子 在主轴上的一个基础大小也叫计算大小 */ /* flex:1 0 15rem; */ } /* flex属性 */ .container > .item { /* flex：默认值，禁止放大，允许收缩，宽度自动 */ /* flex: 0 1 auto; */ flex:initial ; /* 允许放大与收缩 */ flex: 1 1 auto; flex: auto; /* 完全失去弹性，禁止放大与收缩，适合PC端 */ flex:0 0 auto; flex: none; /* 单值，仅代表是否允许放大 */ flex:1; flex:auto; flex:250; /* 单值的时候，无论是写1还是250，都默认是1，但是如果用在单个元素上的时候就有区别 */ }item1item2item3item4页眉+页脚JD登录main页脚
