flex 布局相关属性的使用

简单概述

• 为元素添加 display:flex; 的属性后，当前元素被视为弹性布局的盒子容器(box)，其子元素被视为弹性布局项目(item)。
• item 会在 box 内灵活布局，解决了对齐、分布、尺寸等响应式问题。

演示 demo

<template><div class="mainBox"><div class="box"><divv-for="(item, index) in data":key="index"class="item":style="{background: item.background, height: item.height, width: item.width,}">{{ item.msg }}</div></div></div>
</template>
<script>
export default {data() {return {data: [{ msg: "111", background: "#3E445E", width: "100px", height: "50px", },{ msg: "222", background: "#D0D3DA", width: "100px", height: "60px", },{ msg: "333", background: "#505A9B", width: "100px", height: "70px", },{ msg: "444", background: "#7394CD", width: "100px", height: "80px", },{ msg: "555", background: "#F1E2D0", width: "100px", height: "90px", },{ msg: "666", background: "#F6CFA3", width: "100px", height: "100px", },{ msg: "777", background: "#E18792", width: "100px", height: "110px", },{ msg: "888", background: "#907AC3", width: "100px", height: "120px", },],};},
};
</script>
<style lang="less" scoped>
.mainBox {width: 100%;height: 100%;
}
.box {display: flex;padding: 40px;border: 1px solid #333;.item {color: #fff;}
}
</style>

下述属性演示都在以上代码的基础上进行

用于盒子容器(box)的属性

flex-direction

• 设置 box 内弹性 item 的方向
• 取值：row / row-reverse / column / column-reverse
• flex-direction: row; 行模式-从左到右排列（默认值）

  .box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: row;
  }
  

  
• flex-direction: row-reverse; 行模式-从右到左排列

  .box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: row-reverse;
  }
  

  
• flex-direction: column; 列模式-从上到下排列

  .box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: column;
  }
  

  
• flex-direction: column-reverse; 列模式-从下到上排列

  .box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: column-reverse;
  }
  

  

flex-wrap

• 让 box 在必要的时候换行
• 取值：nowrap / wrap
• flex-wrap: nowrap; 不换行（默认值）

  .box {display: flex;padding: 40px;border: 1px solid #333;flex-wrap: nowrap;
  }
  /* 减小 box 宽度时，item 的宽度失效，被压缩 */
  

  
• flex-wrap: wrap; 换行

  .box {display: flex;padding: 40px;border: 1px solid #333;flex-wrap: wrap;
  }
  /* 减小 box 宽度时，item 的宽度不变，不会被压缩，自动换行 */
  

  

justify-content

• 设置 box 内弹性 item 的对齐分布方式
• 取值：flex-start / flex-end / center / space-between / space-around / space-evenly
• 为方便观察不同属性的对比，移除了 box 的 padding 属性
• justify-content: flex-start; 起点对齐（默认值）

  .box {display: flex;border: 1px solid #333;justify-content: flex-start;
  }
  

  
• justify-content: flex-end; 结束点对齐

  .box {display: flex;border: 1px solid #333;justify-content: flex-end;
  }
  

  
• justify-content: center; 居中对齐

  .box {display: flex;border: 1px solid #333;justify-content: center;
  }
  

  
• justify-content: space-between; 两端对齐

  .box {display: flex;border: 1px solid #333;justify-content: space-between;
  }
  

  
• justify-content: space-around; 周围分布-视作 margin 效果的话，相当于每个 item 的 margin-left 和 margin-right 值相同

  .box {display: flex;border: 1px solid #333;justify-content: space-around;
  }
  /* margin-right = margin-left = (box 的宽度 - item 的宽度 * 8) / (8 * 2) */
  

  
• justify-content: space-evenly; 均匀分布-视作 margin 的话，均匀分配剩余空间，每个 item 的 margin-left 值相等，最后剩下的空隙，值与 item 的 margin-left 相等

  .box {display: flex;border: 1px solid #333;justify-content: space-evenly;
  }
  /* margin-right = 0 */
  /* margin-left = (box 的宽度 - item 的宽度 * 8) / (8 + 1) */
  

  

align-items

• 设置 box 内弹性 item 的针对交叉轴的对齐分布方式
• 取值：flex-start / flex-end / center
• align-items: flex-start; 起点对齐（默认值）

  .box {display: flex;padding: 40px;border: 1px solid #333;align-items: flex-start;
  }
  

  
• align-items: flex-end; 结束点对齐

  .box {display: flex;padding: 40px;border: 1px solid #333;align-items: flex-end;
  }
  

  
• align-items: center; 居中对齐

  .box {display: flex;padding: 40px;border: 1px solid #333;align-items: center;
  }
  

  

align-content

• 设置多轴线 box 内弹性 item 的对齐分布方式

• 取值：flex-start / flex-end / center / space-between / space-around / space-evenly

• 为方便观察不同属性的对比，移除了 box 的 padding 属性

• 为外层父盒子添加 flex 属性，形成多轴线的盒子

• align-content: flex-start; 起点对齐

  .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: flex-start;}
  }
  

  

• align-content: flex-end; 结束点对齐

  .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: flex-end;}
  }
  

  

• align-content: center; 居中对齐

  .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: center;}
  }
  

  

• align-content: space-between; 两端对齐

  .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: space-between;}
  }
  

  

• align-content: space-around; 周围分布

  .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: space-around;}
  }
  

  

• align-content: space-evenly; 均匀分布

  .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: space-evenly;}
  }
  

  

用于弹性项目(item)的属性

order

• 设置 box 内弹性 item 的排序
• 取值：Num，取值越小越靠前，默认为 0

  .item {color: #fff;&:nth-child(1) {order: 4;}&:nth-child(2) {order: 3;}&:nth-child(3) {order: 0;}&:nth-child(4) { }&:nth-child(5) {order: 2;}
  }
  

  

flex-grow

• 设置 box 内弹性 item 的扩展系数
• 取值：Num，取值越小扩展比例越小，默认为 0

  .item {color: #fff;&:nth-child(1) {flex-grow: 1;}&:nth-child(2) {flex-grow: 3;}&:nth-child(3) {flex-grow: 1;}&:nth-child(4) { }&:nth-child(5) { }
  }
  

  

flex-basis

• 设置 box 内弹性 item 的初始宽度，会覆盖原有宽度属性
• 取值：像素值

  .item {color: #fff;&:nth-child(1) {flex-basis: 50px;}&:nth-child(2) {flex-basis: 100px;}&:nth-child(3) {flex-basis: 150px;}&:nth-child(4) {flex-basis: 200px;}&:nth-child(5) {flex-basis: 250px;}
  }
  

  

flex-shrink

• 设置 box 内弹性 item 的收缩系数
• 取值：Num，取值越小压缩比例越小，默认为 1 ，取值为 0 时，不会被压缩

  .item {color: #fff;&:nth-child(1) {flex-shrink: 1;}&:nth-child(2) {flex-shrink: 2;}&:nth-child(3) {flex-shrink: 3;}&:nth-child(4) {flex-shrink: 0;}&:nth-child(5) {flex-shrink: 0;}
  }