flex学习总结

BoSet / 2023-09-05 / 原文

参考资料：

坐标轴

divContainer: {
  display: flex;
  flex-direction: row-reverse;
}
// 延申：
// 1.写在contaniner有6个属性：3个flex-，2个align-，1个justify-content
// 2.flex-direction: row(默认) | row-reverse | column | column-revers
// 3.flex-direction: row-reverse与justify-content: flex-end的区别
//   flex-direction: row-reverse坐标轴反转，123 -> 321排列
//   justify-content: flex-end坐标轴不反转，123 -> 123排列

排列

// 左对齐
divContainer: {
  display: flex;
  justify-content: flex-start;
}

// 右对齐
divContainer: {
  display: flex;
  justify-content: flex-end;
}

// 居中对齐
divContainer: {
  display: flex;
  justify-content: center;
}

// 底部对齐
divContainer: {
  display: flex;
  align-item: flex-end;
}

// 只需要3号元素底部对齐
divContainer: {
  display: flex;
}

divContainer:nth-child(2): {
  align-self: flex-end;
}

// 平均剩余空间
divContainer: {
  display: flex;
  justify-content: space-around;
}

// 左右先贴边，再平均剩余空间
divContainer: {
  display: flex;
  justify-content: space-between;
}

// 左右先贴边，再平均剩余空间
divContainer: {
  display: flex;
  justify-content: space-between;
}

// 排列超过行内宽度后，元素自动换行
divContainer: {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap
}

// 在父元素中水平垂直方向都居中对齐，并且元素水平排列
divContainer: {
  display: flex;
  justify-content: center;
  align-item: center;
}

// 在父元素中水平垂直方向都居中对齐，并且元素垂直排列
divContainer: {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-item: center;
}

// 上下先贴边，再平均剩余空间
divContainer: {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: space-between;
}

// 水平方向子元素自动换行
divContainer: {
  display: flex;
  /*flex-direction: row;
  flex-wrap: wrap;*/
  flex-flow: row wrap; // 合并成一句
}

// 延申：
// 1.flex默认nowrap，当增加子元素，子元素宽度会被压缩
// 2.align-content：作用于y轴多行的情况，单行无效
// 3.align-item: 作用于y轴单行的情况
// 4.flex-flow = flex-direction + flex-wrap

空间分配

// <div>
//   <span>1</span>
//   <span>2</span>
//   <span>3</span>
// </div>
// 子元素没有宽度，要求子元素平均分配父元素的宽度
divContainer: {
  display: flex;
}
divContainer item: {
  flex: 1;
}

// 前后两个元素固定宽度，要求中间元素自动撑满宽度
divContainer: {
  display: flex;
  width: 60%;
}
divContainer:nth-child(0) {
  width: 50px;
}
divContainer:nth-child(1) {
  flex: 1;
}
divContainer:nth-child(2) {
  width: 50px;
}

// 延申：
//   1.flex定义在子元素上，表示占剩余宽度的多少份
//   2.比如上面的需求：子元素没有宽度，要求子元素平均分配父元素的宽度
//       (1)剩余宽度就是父元素的宽度
//       (2)设置子元素flex:1就是平均每个子元素都是占一份
//   3.nth-child(0)与nth-child(1)设置flex:1,nth-child(1)设置flex:2
//     那就是父元素被平均分成4份，nth-child(1)占两份