1. Flexbox Theory

A quick introduction to the CSS Flexbox property.

Flex Declaration

A key thing to know about the Flex property is that it is not applied directly to elements you wish to position. Instead, Flex and all its complementary CSS properties are declared on the "parent" of the elements to be affected. The following example illustrates this.

<div class="parent">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

// Correct flex application

.parent {
  display: flex;
}


// Incorrect

.parent {
  .circle{
    display: flex;
  }
}

It is important to keep the implementation above in mind. When you start using the custom sds-flex() mixin, this same approach and logic will need to be followed.

Flex Direction

When declaring flex in a parent element, developers will notice that the children elements are going to be positioned in a row, one next to each other, even if they are block-level elements. But this row presentation is merely the default. Flex works with two main axes or directions: horizontal (X) and vertical (Y).

To control which axis the elements are positioned on, the flex-direction property can be used with its two main values: row (X axis) or column (Y axis) Based on the specified direction, the elements will be positioned accordingly.

.parent{
  display: flex;
  flex-direction: row | column;
}

Justify Content

With the main direction is declared, developers can also control the spacial distribution of elements. The five distributions listed below are the most commonly used ones.

1. flex-start

2. center

3. flex-end

4. space-around

5. space-between

.parent{
  display: flex;
  flex-direction: row | column;
  justify-content: flex-start | center | flex-end | space-around | space-between;
}

Examples of CSS Flexbox justify-content within a flex row.

Examples of CSS Flexbox justify-content within a flex column.

Align Items

Along with controlling the primary axis (flex-direction), Flexbox also allows provides control for positioning elements along the secondary axis. If flex-direction = row , then X is the primary axis and Y would be the secondary. If flex-direction = column, then Y would be the primary axis with X serving as the secondary.

justify-content targets the primary axis, align-items targets the secondary axis.

The align-items property accepts the following values:

1. flex-start

2. center

3. flex-end

.parent{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start | center | flex-end;
}

The previous example uses flex-direction: row; and justify-content: center; . However, these values can be substituted for any of the other previously mentioned values, resulting in a plethora of combinations that a developer will end up writing. To simplify the developer experience, Sipster provides a custom SCSS mixin which you can learn about in the next section.