flex布局

/**
 * flex布局
 */

.flex {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.flex.j_center {
  justify-content: center;
  -webkit-justify-content: center;
}
.flex.j_start {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
.flex.j_end {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
.flex.j_around {
  justify-content: space-around;
  -webkit-justify-content: space-around;
}
.flex.a_start {
  align-items: flex-start;
  -webkit-align-items: flex-start;
}
.flex.a_end {
  align-items: flex-end;
  -webkit-align-items: flex-end;
}
.flex.a_baseline {
  align-items: baseline;
  -webkit-align-items: baseline;
}
.flex.wrap {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.flex.column {
  flex-direction: column;
  -webkit-flex-direction: column;
}
.flex .row-1 {
  -webkit-flex: 1;
  flex: 1;
}
.flex .row-2 {
  -webkit-flex: 2;
  flex: 2;
}
.flex .row-3 {
  -webkit-flex: 3;
  flex: 3;
}
.flex .row-4 {
  -webkit-flex: 4;
  flex: 4;
}
.flex .row-5 {
  -webkit-flex: 5;
  flex: 5;
}



.flex_inline {
  display: -webkit-inline-flex;
  display: inline-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.flex_inline.j_center {
  justify-content: center;
  -webkit-justify-content: center;
}
.flex_inline.j_start {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
.flex_inline.j_end {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
.flex_inline.j_around {
  justify-content: space-around;
  -webkit-justify-content: space-around;
}
.flex_inline.a_start {
  align-items: flex-start;
  -webkit-align-items: flex-start;
}
.flex_inline.a_end {
  align-items: flex-end;
  -webkit-align-items: flex-end;
}
.flex_inline.a_baseline {
  align-items: baseline;
  -webkit-align-items: baseline;
}
.flex_inline.wrap {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.flex_inline.column {
  flex-direction: column;
  -webkit-flex-direction: column;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值