Flexbox
Flexbox, short for "Flexible Box Layout," is a layout model in CSS (Cascading Style Sheets) that provides an efficient and predictable way to arrange and align elements within a container. It was designed to make it easier to create complex layouts and distribute space among items in a container, regardless of their size or order.
Flexbox works by allowing the container element (also referred to as the "flex container") to control how its child elements (also called "flex items") are positioned, sized, and spaced. This makes it particularly useful for building responsive and dynamic designs where the arrangement of elements can adapt to different screen sizes and orientations.
Flexbox provides a more intuitive and flexible way to achieve various layout designs compared to traditional CSS methods. However, it's important to note that Flexbox is more suitable for one-dimensional layouts (either rows or columns), and for more complex two-dimensional layouts, CSS Grid is another layout model that can be used in conjunction with Flexbox or on its own.
Flexbox basics explained on the W3schools website.
Another Article about Flexbox
Video tutorials for Flexbox
Flexbox Demos
Applied to Container: Flex-Wrap
The default is "flex-wrap: nowrap;". This aligned all elements horizontally. The width settings of the flex items are being ignored.
See the Pen FB-nowrap by Oliver Roeger (@uic-des) on CodePen.
"flex-wrap: wrap;". This aligned all elements horizontally and wraps the element taking their widths into consideration (similar to the "float" property.
See the Pen FB-wrap by Oliver Roeger (@uic-des) on CodePen.
Applied to Container: Justify-Content
The default is "justify-content: flex-start;". This aligned all items on the left of the container.
See the Pen FB-justify-content-start by Oliver Roeger (@uic-des) on CodePen.
"justify-content: flex-end;". This aligned all items on the right of the container.
See the Pen FB-justify-content-end by Oliver Roeger (@uic-des) on CodePen.
"justify-content: center;". This aligned all items in the center of the container.
See the Pen FB-justify-content-center by Oliver Roeger (@uic-des) on CodePen.
"justify-content: space-between ;". This spreads out all items from the center of the container.
See the Pen FB-justify-content-spacebetween by Oliver Roeger (@uic-des) on CodePen.
"justify-content: space-around ;". This distributes the items with the same space around them.
See the Pen FB-justify-content-spacearound by Oliver Roeger (@uic-des) on CodePen.
"justify-content: space-evenly ;". This distributes the items with the equal space around them.
See the Pen FB-justify-content-spaceevenlyl by Oliver Roeger (@uic-des) on CodePen.
Applied to Container: Align-Items
This defines the default behavior for how flex items are laid out along the cross axis on the current line
align-items: flex-start; (default)
See the Pen FB-align-items-start by Oliver Roeger (@uic-des) on CodePen.
align-items: flex-end;
See the Pen FB-align-items-end by Oliver Roeger (@uic-des) on CodePen.
align-items: center;
See the Pen FB-align-items-center by Oliver Roeger (@uic-des) on CodePen.
align-items: stretch;
See the Pen FB-align-items-stretch by Oliver Roeger (@uic-des) on CodePen.
Applied to Container: Align-Content
This aligns content that has multiple lines/rows together with the flex-wrap declaration.
align-content: flex-start; (default)
See the Pen FB-align-content-start by Oliver Roeger (@uic-des) on CodePen.
align-content: flex-end;
See the Pen FB-align-content-end by Oliver Roeger (@uic-des) on CodePen.
align-content: center;
See the Pen FB-align-content-center by Oliver Roeger (@uic-des) on CodePen.
align-content: stretch;
See the Pen FB-align-content-stretch by Oliver Roeger (@uic-des) on CodePen.
align-content: space-between;
See the Pen FB-align-content-spacebetween by Oliver Roeger (@uic-des) on CodePen.
align-content: space-around;
See the Pen FB-align-content-spacearound by Oliver Roeger (@uic-des) on CodePen.
Example: Fluid centering an item horizontally and vertically
See the Pen FB-centering by Oliver Roeger (@uic-des) on CodePen.