- /*flex布局基本样式*/
- .flex {
- display: flex;
- }
-
- .inline-flex {
- display: inline-flex;
- }
-
- .flex-r {
- flex-direction: row;
- }
-
- .flex-v {
- flex-direction: column;
- }
-
- /*垂直方向*/
- .flex-align-start {
- align-items: flex-start;
- }
-
- .flex-align-center {
- align-items: center;
- }
-
- .flex-align-end {
- align-items: flex-end;
- }
-
- .flex-align-baseline {
- align-items: baseline;
- }
-
- /*水平方向*/
- .flex-justcontent-center {
- justify-content: center;
- }
-
- .flex-justcontent-spacebetween {
- justify-content: space-between;
- }
-
- .flex-justcontent-start {
- justify-content: flex-start;
- }
-
- .flex-justcontent-end {
- justify-content: flex-end;
- }
-
- .flex-justcontent-spacearound {
- justify-content: space-around;
- }
- .flex-justcontent-spaceevenly {
- justify-content: space-evenly;
- }
-
- /*平均分布*/
- .flex-1 {
- flex: 1;
- }
-
- /*换行*/
- .flex-wrap {
- flex-wrap: wrap;
- }
-
- .flex-nowrap {
- flex-wrap: nowrap;
- }