flex布局常用

最新推荐文章于 2024-10-06 23:37:55 发布

愿编码半生，归来仍是少年

最新推荐文章于 2024-10-06 23:37:55 发布

阅读量124

点赞数

文章标签： css flex html

本文链接：https://blog.csdn.net/weixin_44733895/article/details/118311332

版权

/*弹性布局*/
.flex {
  display: -webkit-flex;
  display: flex;
}

.flex-item {
  -webkit-flex: 1;
  flex        : 1;
}

.flex-item-1 {
  -webkit-flex: 1;
  flex        : 1;
}

.flex-item-2 {
  -webkit-flex: 2;
  flex        : 2;
}

.flex-item-3 {
  -webkit-flex: 3;
  flex        : 3;
}

.flex-item-4 {
  -webkit-flex: 4;
  flex        : 4;
}
.flex-item-6 {
  -webkit-flex: 6;
  flex        : 6;
}
.flex-row {
  -webkit-flex-flow     : row;
  flex-flow             : row;
  -webkit-flex-direction: row;
  flex-direction        : row;
}

.flex-column {
  -webkit-flex-flow     : column;
  flex-flow             : column;
  -webkit-flex-direction: column;
  flex-direction        : column;
}

.flex-left {
  -webkit-justify-content: flex-start;
  justify-content        : flex-start;
}

.flex-right {
  -webkit-justify-content: flex-end;
  justify-content        : flex-end;
}

.flex-center {
  -webkit-justify-content: center;
  justify-content        : center;
}

.flex-between {
  -webkit-justify-content: space-between;
  justify-content        : space-between;
}

.flex-around {
  -webkit-justify-content: space-around;
  justify-content        : space-around;
}

.flex-top {
  -webkit-align-items: flex-start;
  align-items        : flex-start;
}

.flex-middle {
  -webkit-align-items: center;
  align-items        : center;
}

.flex-bottom {
  -webkit-align-items: flex-end;
  align-items        : flex-end;
}

.flex-baseline {
  -webkit-align-items: baseline;
  align-items        : baseline;
}

.flex-stretch {
  -webkit-align-items: stretch;
  align-items        : stretch;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* 文字超出n行隐藏 */
.text-more-1 {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}