常用CSS flex样式类

/flex .f-属性名缩写-属性值缩写/
.flex {
display: flex;
}
.inflex {
display: inline-flex;
}
.flex.f-fd-r,
.inflex.f-fd-r {
flex-direction: row;
}
.flex.f-fd-rr,
.inflex.f-fd-rr {
flex-direction: row-reverse;
}
.flex.f-fd-c,
.inflex.f-fd-c {
flex-direction: column;
}
.flex.f-fd-cr,
.inflex.f-fd-cr {
flex-direction: column-reverse;
}
.flex.f-jc-fs,
.inflex.f-jc-fs {
justify-content: flex-start;
}
.flex.f-jc-fe,
.inflex.f-jc-fe {
justify-content: flex-end;
}
.flex.f-jc-sb,
.inflex.f-jc-sb {
justify-content: space-between;
}
.flex.f-jc-c,
.inflex.f-jc-c {
justify-content: center;
}
.flex.f-jc-sa,
.inflex.f-jc-sa {
justify-content: space-around;
}
.flex.f-ai-fs,
.inflex.f-ai-fs {
align-items: flex-start;
}
.flex.f-ai-fe,
.inflex.f-ai-fe {
align-items: flex-end;
}
.flex.f-ai-c,
.inflex.f-ai-c {
align-items: center;
}
.flex.f-ai-b,
.inflex.f-ai-b {
align-items: baseline;
}
.flex.f-ai-s,
.inflex.f-ai-s {
align-items: stretch;
}
.flex.f-fw-w,
.inflex.f-fw-w {
flex-wrap: wrap;
}
.flex.f-fw-n,
.inflex.f-fw-n {
flex-wrap: nowrap;
}
.flex.f-fw-wr,
.inflex.f-fw-wr {
flex-wrap: wrap-reverse;
}
.flex.f-ff-rn,
.inflex.f-ff-rn {
flex-flow: row nowrap;
}
.flex.f-ff-cn,
.inflex.f-ff-cn {
flex-flow: column nowrap;
}
.flex.f-ac-c,
.inflex.f-ac-c {
align-content: center;
}
.flex.f-ac-sb,
.inflex.f-ac-sb {
align-content: space-between;
}
.flex.f-ac-fs,
.inflex.f-ac-fs {
align-content: flex-start;
}
.flex.f-ac-fe,
.inflex.f-ac-fe {
align-content: flex-end;
}
.flex.f-ac-s,
.inflex.f-ac-s {
align-content: stretch;
}
.flex.f-ac-sa,
.inflex.f-ac-sa {
align-content: space-around;
}
.flex > .f-fg-1,
.inflex > .f-fg-1 {
flex-grow: 1;
}
.flex > .f-fs-0,
.inflex > .f-fs-0 {
flex-shrink: 0;
}
.flex > .f-as-b,
.inflex > .f-as-b {
align-self: baseline;
}
.flex > .f-as-c,
.inflex > .f-as-c {
align-self: center;
}
.flex > .f-as-fs,
.inflex > .f-as-fs {
align-self: flex-start;
}
.flex > .f-as-fe,
.inflex > .f-as-fe {
align-self: flex-end;
}
.flex > .f-as-a,
.inflex > .f-as-a {
align-self: auto;
}
.flex > .f-as-sh,
.inflex > .f-as-sh {
align-self: stretch;
}