FLEXBOX

Documentation: https://www.w3schools.com/css/css3_flexbox.asp

Before the Flexbox Layout module, there were four layout modes:

Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

ALIGN ITEMS

The align-items property is used to align the flex items vertically. The flex container (parent element) becomes flexible by setting the display property to flex.

FLEX-START

The center value aligns the flex items in the middle of the container:

[SELECTOR] { display: flex; align-items: flex-start; }

CHILD ELEMENT

CENTER

The center value aligns the flex items in the middle of the container:

[SELECTOR] { display: flex; align-items: center; }

CHILD ELEMENT

FLEX-END

The center value aligns the flex items in the middle of the container:

[SELECTOR] { display: flex; align-items: flex-end; }

CHILD ELEMENT

IN DUDA

ROW

When applied to a row (parent), the column-wrapper (child) will be vertically centered:

.dmRespRow { display: flex; align-items: center; }

CHILD ELEMENT

COLUMN-WRAPPER

When applied to a column-wrapper (parent), the columns (child) will be vertically centered:

.dmRespColsWrapper { align-items: center; }

Note: column-wrappers are set to display: flex; by default.

CHILD ELEMENT

COLUMN

When applied to a column (parent), the content (child) will be vertically centered:

.dmRespCol { display: flex!important; align-items: center; }

CHILD ELEMENT