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屬性完全一致