CSS Flexbox

Working with the CSS Flexbox property to control layout and presentation.

This section primarily focuses code implementation for developers. However, it is still important for designers to understand the methods in which design mockups are translated to code, so designers are still encouraged to review this section.

Flexbox is a CSS property that allows developers to position elements based on a more fluid approach, and allows layouts to adapt to different environments or factors in a much easier manner than other traditional CSS methods.

Sipster's layout system includes a custom mixin that makes implementing flexbox and all its associated properties simple and efficient. In order to use this mixin properly and to its full potential, it is critical to first have a working knowledge of the CSS Flexbox property.

The remainder of this section is organized in two sections: Flexbox Theory and Implementation. If you are already familiar with Flexbox, you can skip the Theory section and jump straight to Implementation.

1. Flexbox Theory2. sds-flex()