­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ /* * Horizontal Wrapper */ .w-hwrapper { display: flex; align-items: center; } .w-hwrapper.align_center { justify-content: center; } .w-hwrapper.align_center > * { margin-left: 0.6rem; /* fallback for IE11 */ margin-right: 0.6rem; /* fallback for IE11 */ margin-left: calc( var(--hwrapper-gap, 1.2rem) / 2 ); margin-right: calc( var(--hwrapper-gap, 1.2rem) / 2 ); } .w-hwrapper.align_left { justify-content: flex-start; } .w-hwrapper.align_left > * { margin-right: 1.2rem; /* fallback for IE11 */ margin-right: var(--hwrapper-gap, 1.2rem); } .w-hwrapper.align_left > *:last-child { margin-right: 0; } .w-hwrapper.align_right { justify-content: flex-end; } .w-hwrapper.align_right > * { margin-left: 1.2rem; /* fallback for IE11 */ margin-left: var(--hwrapper-gap, 1.2rem); } .w-hwrapper.align_right > *:first-child { margin-left: 0; } .w-hwrapper.align_justify { justify-content: space-between; } .w-hwrapper.align_justify > * { margin-right: 1.2rem; /* fallback for IE11 */ margin-right: var(--hwrapper-gap, 1.2rem); } .w-hwrapper.align_justify > *:last-child { margin-right: 0; } .w-hwrapper.valign_top { align-items: flex-start; } .w-hwrapper.valign_bottom { align-items: flex-end; } .w-hwrapper.valign_baseline { display: block; } .w-hwrapper.valign_baseline > * { display: inline-block; vertical-align: baseline !important; } .w-hwrapper.wrap { flex-wrap: wrap; }