.flex,
.flex-row,
.flex-column {
	display: flex;
	width: 100%;
	// min-width: 100%;
	// min-height: 100%;
}
.flex-row {
	flex-direction: row;
}
.flex-column {
	flex-direction: column;
}

.flex0 {
	flex-grow: 0;
}
.flex1 {
	flex-grow: 1;
}

.align-left {
	margin-right: auto;
}
.align-center {
	margin-left: auto;
	margin-right: auto;
}
.align-right {
	margin-left: auto;
}

.align-top {
	align-self: flex-start;
}
.align-middle {
    align-self: center;
}
.align-bottom {
	align-self: flex-end;
}

/* ====== align-n is named by keyboard ten-key ====== */

.align-left-top,
.align-7 {
	margin-right: auto;
	align-self: flex-start;
}
.align-center-top,
.align-8 {
	margin-left: auto;
	margin-right: auto;
	align-self: flex-start;
}
.align-right-top,
.align-9 {
	margin-left: auto;
	align-self: flex-start;
}

.align-left-middle,
.align-4 {
	margin-right: auto;
	align-self: center;
}
.align-center-middle,
.align-5 {
	margin-left: auto;
	margin-right: auto;
	align-self: center;
}
.align-right-middle,
.align-6 {
	margin-left: auto;
	align-self: center;
}

.align-left-bottom,
.align-1 {
	margin-right: auto;
	align-self: flex-end;
}
.align-center-bottom,
.align-2 {
	margin-left: auto;
	margin-right: auto;
	align-self: flex-end;
}
.align-right-bottom,
.align-3 {
	margin-left: auto;
	align-self: flex-end;
}