uni-app flex布局

flex布局的概念

任何一个容器都可以指定为 Flex 布局（行内元素也可以使用 Flex 布局。）

.news{
  display: flex;/ display: inline-flex;
}

webkit内核的浏览器，必需加上-webkit前缀

.news{
    display:-webkit-flex;
    display:flex;
}

特点：

• flexible box：弹性盒状布局
• 容器控制内部元素的布局定位
• CSS3引入的新布局模型
• 伸缩元素，自由填充，自适应

优势：

• 可在不同方向排列元素
• 控制元素排序的方向
• 控制元素的对齐方式
• 控制元素之间等距
• 控制单个元素放大与缩放比例、占比、对齐方式

flex布局的常用术语：

• flex container:flex容器
• flex item:flex项目（元素）
• flex direction：布局方向

flex属性

• flex-direction：设置元素的排列方向

  row：从左至右
  row-reverse：从右至左
  column：从上到下
  column-reverse：从下到上
  

• flex-wrap： 使容器内的元素换行

  nowrap：不换行
  wrap：换行
  wrap-reverse：反向换行
  

• justify-content：设置元素在主轴上的对齐方式
  
  

  flex-start：左对齐
  flex-end：右对齐
  center：居中对齐
  space-between：等距对齐（两端对齐，空白分配在元素中间）
  space-around：效果同上，但是两边留白　　
  

• align-items：设置元素在交叉轴上的对齐方式

  stretch：如果容器内元素未设置高度，则默认元素高度为容器高度
  flex-start：容器的纵轴上部对齐
  flex-end：容器的纵轴下部对齐
  center：在容器的纵轴中部对齐
  baseline：如果容器中的元素中有文字，则按文字底部对齐
  

• align-content：设置轴线的对齐方式（轴线当做元素）

  当轴线超过1条(多行)的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐
  flex-start：向左对齐
  flex-end：向右对齐
  center：居中
  stretch：当宽度width没有设置的时候，轴线可以被拉伸
  space-between：两端对齐，元素之间的空白等比切分
  space-around：轴线两边的空白等比切分
  

Flex元素的属性

• order：控制元素顺序
  用于设置flex容器内部的每个元素的排列顺序，order的值越小 ，越排在前面

  .green{
  	order: number;
  }
  

• flex-grow：控制元素放大比例（默认值为0 ，不会放大）

  .green {
  	flex-grow: number; 
  }
  

• flex-shrink：控制元素缩小比例（默认为1）

  .green {
  	flex-shrink: number; 
  }
  

• flex-basis：设置元素固定或自动空间的占比（默认值auto）

  .green {
  	flex-basis: length; 
  }
  

• align-self：重写align-items父属性
  重写容器中元素在交叉轴上的对齐方式

  auto：默认，表示继承父级元素的align-items属性
  stretch：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
  flex-starl：在交叉轴上向起点位置（向上/向左）对齐
  flex-end：在交叉轴上向结束位置（向下/向右）对齐
  center：居中对齐
  baseline：保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）
  //除了auto，其他都与align-items属性完全一致