一定要学好flex！！！

一个非常重要非常好用的属性

目录：
设置主轴方向
设置侧轴方向
更改主轴或者侧轴方向
是否换行–自动换行
是否自动缩小

基本概念

样例一：

分别紧靠左右两边

实现代码

/* pages/flex/flex.wxss */
.outer{
  background-color: pink;
  width: 300px;
  height: 300px;
  /* 让图片水平分布到盒子两边 */
  display: flex;
  justify-content: space-between;
}

.outer .inner{
  width: 100px;
  height: 100px;
  background-color: green;
  border: 1rpx solid red;
  /* 如果想让边框隐藏在盒子内部 ，意思就是边框和盒子一共100rpx;
  则使用 ：
   */
   box-sizing: border-box;
}

样例二

实现代码

.outer{
  background-color: pink;
  width: 300px;
  height: 300px;
  display: flex;
  /* 让图片水平均匀到盒子中 */
  justify-content: space-around;
}

.outer .inner{
  width: 100px;
  height: 100px;
  background-color: green;
  border: 1rpx solid red;
  /* 如果想让边框隐藏在盒子内部 ，意思就是边框和盒子一共100rpx;
  则使用 ：
   */
   box-sizing: border-box;
}

样例三：设置主轴的排列方式

如下图在中间。也可以在紧贴左边，也可以紧贴右边

实现代码

 /* 设置主轴的排列方式 */
  /* 1. 紧挨左边 */
  justify-content: flex-start; 
  /* 2.紧挨右边 */
  justify-content: flex-end; 
  /* 3.在中间 */
 justify-content: center; 
  /* 4.均匀分布（中间的距离是左右的两倍） */
   justify-content: space-around; 
  /* 5.均匀分布（左右中间的距离相等）*/
  justify-content: space-evenly;
  /* 6.让图片水平分布到盒子两边 */
  justify-content: space-between; 

样例四：设置侧轴的排列方式

在侧轴上的排列方式 通过align-items实现。

• 子容器没有设置高度时，能自动拉伸
  

/* 设置侧轴的排列方式 */
  /* 1.紧挨上边 */
  /* align-items: flex-start; */
  /* 2.紧挨下边 */
  /* align-items: flex-end; */
  /* 3.垂直中间 */
  /* align-items: center; */
  /* 4. 在子容器没有设置高度时，会自动拉伸 */
  /* align-items: stretch; */
  /* -------------------------------- */
  /* -------------------------------- */

样例四：更改主轴方向和侧轴方向

• 更改主轴方向和侧轴方向
• 如图是水平方向从右到左
  

实现代码

/* 更改主轴方向和侧轴方向 */
  /* 1.水平方向从左到右 */
  /* flex-direction: row; */
  /* 2.水平方向从右到左 */
  /* flex-direction: row-reverse; */
  /* flex-direction: column; */
  flex-direction: column-reverse;

样例五：实现换行

• 默认处理方式：会缩小自动按比例缩小图片的宽度
• flex-wrap: wrap;
• flex-wrap: wrap-reserse;会换一个方向
  

换行且多行排列有要求

实现代码

/* 换行 */
  flex-wrap: wrap;
  /* 如果是多行 */
  /* 1.想要实现的效果是 多行紧挨 */
  align-content: flex-start;

样例六：项目宽度

• 使用flex-basis
• fle-basis：0;
• 容器一 会保留项目所使用的的宽度
  

/* pages/flex/flex.wxss */
.outer{
  background-color: pink;
  width: 300px;
  height: 300px;
  display: flex;
}

.outer .inner{
  width: 100px;
  height: 100px;
  background-color: green;
  border: 1rpx solid red;
  /* 如果想让边框隐藏在盒子内部 ，意思就是边框和盒子一共100rpx;
  则使用 ：
   */
   box-sizing: border-box;
}

.outer .inner1{
  flex-basis: 0;
}

• flex-grow：1； 表明剩余空间会占满
  

//给容器单独加一个属性，表明，有空余部分延伸加满。
.outer .inner2{
  flex-grow: 1;
}

重要部分！！！

• 如果想实现这种功能，自定义比例。则使用如下方法，超好用！！！
• 需要给子元素添加 flex-grow：2；
  

/* pages/flex/flex.wxss */
.outer{
  background-color: pink;
  width: 300px;
  height: 300px;
  display: flex;
}

.outer .inner{
  height: 100px;
  background-color: yellow;
  border: 1rpx solid red;
   box-sizing: border-box;
}

//非常重要 需给子元素添加 flex-grow属性。
.outer .inner1{
  flex-grow: 2;
}

.outer .inner2{
  flex-grow: 1;
}

样例：是否自动缩小

• 自动缩小。当一排放不下时，会实现自动缩小。
• 给子元素加 flex-shrink：0；就会实现该个子元素不被缩小
• 例如下图，第一块没有被缩小。