CSS Flexbox Layouts

Horizontal Navigation Bar

The most basic navbar structure used in sites:

A typical way to make a nagivation place for your site.

Horizontal Footers

This works just like navbars - use the "display: flex" value:

Copy

Row-directed footers are used alot in sites - especially older ones.

Equal-Height Cards

Used alot in service websites, where divs are the same in height and use flex layout:

Copy

The cards content is directed to column layouts, so the "h3" elements appear like actual titles. It also looks more clean that way.

Main and Cross Axes Alignment

This is essential to have if you are working to have items across a parent element:

Copy

This code puts the parent div's objects around inside the box.

Wrap Layout

Typically used by news websites, where are articles and banners in a unique layout:

Copy

The "flex" attribute is the shorthand for "flex-grow", "flex-shrink" and "flex-basis" - these together provide shrinking, growing and base size for the layout.