2019.12.25第五节课 flex项目属性

flex项目属性

1.flex-basis：项目宽度：分配到主轴剩余空间之前，项目所占主轴宽度，auto原始宽度
2、lex-grow：项目扩展：将主轴上的剩余空间分配给项目，0为默认，1为平均，设定在0-1之间
3、flex-shrink：项目收缩：将项目上超出空间在项目之间进行缩减 1为默认
4、flex：1+2+3 默认：不扩张、自动收缩、宽度自动
flex：0 1 auto等于flex：initial
flex: 1 1 auto等于flex：auto
flex:0 0 auto等于flex: none
flex: 2等于lex: 1 1 0
5、align-self：单独定义某个项目在交叉轴上的对齐方式
6、order：排序，定义项目在主轴上的排列方式 默认为0 值越小越靠前

组件

• 一个组件就是一个css样式表，通过样式表，像搭建积木一样将整个网页快速创建出来

  公共组件

• 一个以上的页面都会用到的组件
• 事先将他们先写好放入公共组件表，统一管理与调用
• 组件复用

专用组件

• 仅供一个页面使用的组件

编程约定

• @import语法，实现页面组件的组装
• 一个组件必须使用一个独一无二的类名：class
• 垂直排列：@import基本可以完成
• 水平排列：@import+grid