Simple CSS styles to keep separate layout from other CSS concerns. The fc-* class establishes the container, its direct descendents should apply one of the fi-* styles.

flex-layout.less

/* Vertical (column) Flex Container for actions
-------------------------------------------------- */
.fc-col {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: stretch;
	align-items: stretch;
}

/* Horizontal (row) Flex Container
-------------------------------------------------- */
.fc-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: stretch;
	align-items: flex-start;
}

/* Flex Items
-------------------------------------------------- */

// header and footer intended for column use, elements applying
// this style should also apply a style with a height
.fi-header, .fi-footer {
	order: 0;
	flex: 0 0 auto;
	align-self: auto;
}

// body is intended to be used in both horizontal and vertical flex
// containers and will consume the space not reserved by header,
// footer, or button styles.
.fi-body {
	order: 0;
	flex: 1 1 auto;
	align-self: auto;
}

// btn is intended for use in a row or horizontal container. Elements
// applying this style should also apply a style with a width
.fi-btn {
	order: 0;
	flex: 0 0 auto;
	align-self: auto;
}