@openui5/sap.m/src/sap/m/themes/base/FlexBox.less

OpenUI5 UI Library sap.m

/* ============================== */
/* CSS for control sap.m/FlexBox  */
/* Base theme                     */
/* ============================== */

.sapMFlexBoxBGSolid,
.sapMFlexBoxBGTranslucent {
	background-color: @sapUiGroupContentBackground;
}

.sapMFlexBoxBGTransparent {
	background-color: transparent;
}

.sapMFlexBox {
	display: -webkit-box;	/* old syntax old support, up to android native 4.3, iOS Safari 6.1, Chrome Beta for Android */
	display: -webkit-flex;	/* prefixed for Safari 8 */
	display: flex;

	box-sizing: border-box;
}

.sapMFlexBoxInline:not(.sapMFlexBoxFit) {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: inline-flex;
}

.sapMFlexBoxFit,
.sapMFlexBoxScroll {
	height: 100%;
}

/* Nested FlexBox should have auto-height because of the wrappers */
.sapMFlexBox > .sapMFlexBoxFit {
	height: auto;
}

.sapMFlexItem {
	position: relative;
}

.sapMFlexBoxAlignItemsCenter.sapMVBox > .sapMFlexItem {
	max-width: 100%; /* When using align-items:center on a flex container in the column direction, the contents of flex item, if too big, will overflow their container in IE 10-11. */// TODO remove after 1.62 version
}

/*** flex-direction ***/
.sapMHBox {
	-webkit-box-orient: horizontal;
	-webkit-flex-direction: row;
	flex-direction: row;
}
.sapMVBox {
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.sapMHBox.sapMFlexBoxReverse {
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.sapMVBox.sapMFlexBoxReverse {
	-webkit-box-direction: reverse;
	-webkit-flex-direction: column-reverse;
	flex-direction: column-reverse;
}


/*** justify-content ***/
.sapMFlexBoxJustifyStart {
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
.sapMFlexBoxJustifyEnd {
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.sapMFlexBoxJustifyCenter {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.sapMFlexBoxJustifySpaceBetween {
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.sapMFlexBoxJustifySpaceAround {
	-webkit-box-pack: justify;	/* space-around is not available */
	-webkit-justify-content: space-around;
	justify-content: space-around;
}
.sapMFlexBoxJustifyInherit {
	-webkit-box-pack: inherit;
	-webkit-justify-content: inherit;
	justify-content: inherit;
}


/*** align-items ***/
.sapMFlexBoxAlignItemsStart {
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.sapMFlexBoxAlignItemsEnd {
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}
.sapMFlexBoxAlignItemsCenter {
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.sapMFlexBoxAlignItemsBaseline {
	-webkit-box-align: baseline;
	-webkit-align-items: baseline;
	align-items: baseline;
}
.sapMFlexBoxAlignItemsStretch {
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	align-items: stretch;
}
.sapMFlexBoxAlignItemsInherit {
	-webkit-box-align: inherit;
	-webkit-align-items: inherit;
	align-items: inherit;
}


/*** wrap ***/
.sapMFlexBoxWrapNoWrap {
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.sapMFlexBoxWrapWrap {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.sapMFlexBoxWrapWrapReverse {
	-webkit-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;
}


/*** align-content ***/
.sapMFlexBoxAlignContentStart {
	-webkit-align-content: flex-start;
	align-content: flex-start;
}
.sapMFlexBoxAlignContentEnd {
	-webkit-align-content: flex-end;
	align-content: flex-end;
}
.sapMFlexBoxAlignContentCenter {
	-webkit-align-content: center;
	align-content: center;
}
.sapMFlexBoxAlignContentSpaceBetween {
	-webkit-align-content: space-between;
	align-content: space-between;
}
.sapMFlexBoxAlignContentSpaceAround {
	-webkit-align-content: space-around;
	align-content: space-around;
}
.sapMFlexBoxAlignContentStretch {
	-webkit-align-content: stretch;
	align-content: stretch;
}


/*** align-self ***/
.sapMFlexItemAlignAuto {
	-webkit-align-self: auto;
	align-self: auto;
}
.sapMFlexItemAlignStart {
	-webkit-align-self: flex-start;
	align-self: flex-start;
}
.sapMFlexItemAlignEnd {
	-webkit-align-self: flex-end;
	align-self: flex-end;
}
.sapMFlexItemAlignCenter {
	-webkit-align-self: center;
	align-self: center;
}
.sapMFlexItemAlignBaseline {
	-webkit-align-self: baseline;
	align-self: baseline;
}
.sapMFlexItemAlignStretch {
	-webkit-align-self: stretch;
	align-self: stretch;
}
.sapMFlexItemAlignInherit {
	-webkit-align-self: inherit;
	align-self: inherit;
}