UniApp之Flex

Flex布局

• 定义

1. flexible box：弹性盒状布局
2. 容器控制内部元素的布局定位
3. 伸缩元素，自由填充，自适应

• 常用术语：
  flex container：flex容器
  flex item：flex项目（元素）
  flex direction：布局方向
• 属性
  flex-direction：设置元素的排列方向【row、row-reverse（从右到左）、column】
  flex-wrap：使容器内的元素换行【nowrap（不换行、压缩）、wrap（换行）】
  justify-content：设置元素在主轴上的对齐方式【flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（等比拆分）、space-around】
  align-items：设置元素在交叉轴上的对齐方式【flex-start（左对齐）、flex-end（右对齐）、center（居中）、baseline（保证元素中的文字在同一条基准线）、stretch（拉伸）】
  align-content：设置轴线的对齐方式
  order：控制元素顺序
  flex-grow：控制元素放大比例
  flex-shrink：控制元素缩小比例
  flex-basis：设置元素固定或自动空间的占比
  slign-self：重写align-items父类属性

css引出外部样式：@import url("**.css");
upx：自适应像素单位、会根据屏幕大小计算比例