flex样式

// 两端对齐

.flex-row-between {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

}

// 多行水平居中

.flex-column-center {

  display: flex;

  flex-direction: column;

  align-items: center;

}

// 上下两端对齐

.flex-column-between {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

// 左边起始点

.flex-row-start {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

}

// 上下左右居中

.flex-center {

  display: flex;

  justify-content: center;

  align-items: center;

}

// 只处理上下居中

.flex-v-center {

  display: flex;

  align-items: center;

}

// 处理换行

.flex-w-center {

  display: flex;

  flex-wrap: wrap;

}

// 左右两端对齐上下居中

.flex-b-center {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

// 纵向上下左右居中

.flex-a-center {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

// 横向上下居中末端对齐

.flex-h-flexend {

  display: flex;

  align-items: center;

  justify-content: flex-end;

}

// 上下布局

.flex-h-stretch {

  display: flex;

  flex-direction: column;

  align-items: stretch;

  justify-content: stretch;

}

// 单行省略号

.ellipsis {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

最后

以上就是合适吐司为你收集整理的flex样式的全部内容，希望文章能够帮你解决flex样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。