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

# CSS Flexbox

{% hint style="info" %}
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.
{% endhint %}

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.&#x20;

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.&#x20;

{% content-ref url="flexbox/flex-theory" %}
[flex-theory](flexbox/flex-theory)
{% endcontent-ref %}

{% content-ref url="flexbox/sds-flex-implementation" %}
[sds-flex-implementation](flexbox/sds-flex-implementation)
{% endcontent-ref %}
