1. Flex Theory

Necessary knowledge about Flex property.

Flex Declaration

A key thing to know about the Flex property is that it is not applied directly over the elements. Instead, Flex and all its complementary CSS properties are declared on the "Parent" HTML tag of the elements to be affected.

<!--HTML STRUCTURE-->

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

//-----------
// CORRECT
//-----------

.parent{
  display: flex;
}


//-----------
// INCORRECT
//-----------

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

It is important to keep this in mind, because, when using the sds-flex mixin, developers have to follow this same logic, rather than declaring the mixin on the "Child" elements.

Flex Direction

When declaring flex in a Parent element, deverlopers will notice that the children elements are going to be placed in a row, one next to each other, even if they are block elements. But these elements don't need to stay in a row, because flex works with two main axes or directions--the horizontal one (X) and the vertical one (Y).

To select in which direction to sort the elements, the flex-direction property can be used with its two main values: row or column. According to the selected direction, the flex property will place the elements in the specified row or column.

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

Justify Content

Once the main direction is declared, developers can apply different distributions. 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;
}

Example using justify content with a flex direction row

Example using justify content with a flex direction column

Align Items

Finally, if there are not enough combinations, flex offers the option of using three more combinations with the secondary axis or direction.

For example, if the developer has assigned the row direction to the flex-direction property, then the secondary axis would be the vertical one.

To summarize, justify-content will work with the primary direction, and align-items will work with the secondary direction.

The only three distribution options that can be found for the propertyalign-items are the following:

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 was made using flex-direction: row and justify-content: center; however, these values can be substituted for any other of the previously mentioned values, providing develoeprs with a plethora of combinations summarized in just one line using the sds-flex mixin, which you can find more about in the next chapter.

2. sds-flex Implementation