CSS Flexbox (Flexible Box Layout)

The Flexible Box module, or just 'flexbox' for short, is a box model designed for user interfaces, and it allows users to align and distribute space among items in a container such that elements behave predictably when the page layout must accommodate different, unknown screen sizes. A flex container expands items to fill available space and shrinks them to prevent overflow.

The font-variant-caps property changes the position of characters vertically without shifting the baseline and displays them as superscript or subscript. This property selects the most appropriate glyphs if the given font has some capital letter glyphs of different sizes.

Example

.aligner {
display: flex;
align-items: center;
justify-content: center;
}

justify-content: center on a horizontal flexbox

div#container {
display: flex;
flex-direction: row;
justify-content: center;
}

justify-content: center on a vertical flexbox

div#container {
display: flex;
flex-direction: column;
justify-content: center;
}

align-content: center on a horizontal flexbox

div#container {
display: flex;
flex-direction: row;
align-items: center;
}

align-content: center on a vertically flexbox

div#container {
display: flex;
flex-direction: column;
align-items: center;
}