.xflex7562 {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
}

.item949 {
 border: solid 1px blue;
 padding: 10px;
 margin: 5px;
}

.flex-direction-row-reverse {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 flex-direction: row-reverse;
 width: 300px;
}

.flex-direction-column {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 flex-direction: column;
 width: 300px;
}

.flex-wrap-nowrap {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 flex-wrap: nowrap;
 width: 300px;
}

.flex-wrap-wrap {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 flex-wrap: wrap;
 width: 300px;
}

.flex-wrap-wrap-reverse {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 flex-wrap: wrap-reverse;
 width: 300px;
}

.item-pad-7708 {
 border: solid 1px blue;
 padding: 20px;
 margin: 5px;
}

.justify-content-flex-start {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 justify-content: flex-start;
}

.justify-content-center {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 justify-content: center;
}

.justify-content-space-between {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 justify-content: space-between;
}

.justify-content-space-around {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 justify-content: space-around;
}

.justify-content-space-evenly {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 justify-content: space-evenly;
}

.align-items-center {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 align-items: center;
 width: 300px;
 height: 150px;
}

.align-items-baseline {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 align-items: baseline;
 width: 300px;
 height: 150px;
}

.align-items-stretch {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 align-items: stretch;
 width: 300px;
 height: 150px;
}

.align-items-flex-start {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 align-items: flex-start;
 width: 300px;
 height: 150px;
}

.align-items-flex-end {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
 align-items: flex-end;
 width: 300px;
 height: 150px;
}

.flex-gap {
 display: flex;
 margin: 5px;
 gap: 50px;
 border: dotted 3px red;
 flex-wrap: wrap;
 width: 300px;
}

.flex-column-gap {
 display: flex;
 margin: 5px;
 column-gap: 50px;
 border: dotted 3px red;
 flex-wrap: wrap;
 width: 300px;
}

.flex-row-gap {
 display: flex;
 margin: 5px;
 row-gap: 50px;
 border: dotted 3px red;
 flex-wrap: wrap;
 width: 300px;
}