FE-1

How is the flexbox used? (ID: FE11)

Flexbox is a layout module in CSS that allows you to create flexible and responsive designs. It gives you control over how elements are aligned, distributed, and sized within a container. With Flexbox, you can lay out elements in any direction (horizontally or vertically), align items along the main axis or cross-axis, and control the size of elements based on the available space. This makes it a great solution for building complex and dynamic user interfaces.

Here is an example of how you can use Flexbox in CSS. The code for the example below is here.

The default output of the code when we don’t use the flex property:

1. display: flex is a CSS property that is used to create a flex container and enable the Flexbox layout model. When you set display: flex on an element, it becomes a flex container, and its child elements become flex items. This allows you to create flexible and responsive layouts that can adapt to different screen sizes and devices. In the style.css file, you can uncomment line #5 and save the file.

Output:

2. justify-content is used to align and distribute items along the main axis (the horizontal axis by default) of a flex container. In the style.css file, you can uncomment line #7 and save the file.

Output:

3. align-items is used to align items along the cross-axis (the vertical axis by default) of a flex container and to align the items, we have to define the height to set the boundaries of the flexbox. In the style.css file, you can uncomment lines #9 and #11 and save the file.

Output:

What is the difference between align-items and align content?  (ID: FE12)

First of all, please note that both align-content and align-items work on the cross-axis. Cross-axis in the flexbox is dependent on the flex-direction and runs perpendicular to the main-axis, if flex-direction is either row or row-reverse then the cross-axis is vertical, if flex-direction is either column or column-reverse then the cross-axis is horizontal.

What separates align-items and align-content?

• align-items affect the alignment of items on the current line.
  
  

• align-content affects the alignment across lines of a flex-container. This means that this property does not affect single-line containers.

To understand the working of align-items, please check this CodeSandBox (Feel free to fork and play with it).

Explanation of the code in the above CodeSandBox: We have a flex container with wrapped flex items and as flex-direction is not mentioned it is row by default (i.e. main-axis is row), so the cross-axis is a column. Setting align-items to the center ensures that our flex items are vertically centralized (i.e. along the cross-axis) within each flex line (in this case, each row). 

To understand the working of align-content, please check this CodeSandBox. (Feel free to fork and play with it).
Explanation of the code in the above CodeSandBox: We have the align-content property set to flex-start. This ensures that the flex lines are stacked towards the start of the cross-axis. And because align-items is set to center, each item is centralized vertically (that is, along the cross-axis) within each flex line, even though the flex lines are aligned to the start of the cross-axis. 

What is the difference between rem & em? (ID: FE13)

The em units for the font-size property will be relative to the font-size of the parent element. em units on other properties than font-size will be relative to the font-size of the current element. 

On the other hand, rem unit sizes will always be relative to the font-size of the root HTML element.

When the root font-size is not explicitly set, rem and em values are relative to the browser’s default font-size of 16px.

The rem unit was created to prevent the problem faced in the usage of em in the case of nested children. Please check the example given below:

Output:

So, as you can see, the effect of em units can be compounding when multiple em-font-sized elements are within one another. This can become a problem and can lead to unintended consequences in your designs. This problem is the reason why the rem unit was created.

How does rem solve this problem?

By using the rem unit, the values of parent elements are ignored, and only the value of the root is taken into consideration. Please check the example given below:

Output:

As you can see, using rem units allow us to avoid the compounding effect of em units. With rem, things are always and consistently based on the font-size or the root element, so there are no surprises.

So, which unit is better, em or rem?

There’s no better unit really, and it all depends on your personal preferences. Some people like to design everything in rem units for consistency and predictability, while others like to also use em units in places where the influence of nearby parent elements would make sense.