Wahab Seidu's Blog

Understanding CSS Flexbox

Wahab Seidu — Sat, 23 Sep 2023 18:07:18 GMT

Introduction

A core aspect of CSS you will use many times as a front-end developer is the flexbox layout. Flexbox is quite easy, yet, a lot of developers struggle with it as I once did.

One mistake many developers make is emphasizing more on learning various Flexbox values at the expense of understanding how the layout works in general.

Sure, knowing the various flex properties and their values is useful, but that's not the important part. The important things to understand are:

how to identify the main and the cross axis,
the components of a flex layout and the relationship between them,
the properties that can be applied to each component,
the properties that you can use to adjust the behavior of items on each flex axis (i.e. the main and the cross axis), and
the behavior of each property and how it can be adjusted to achieve the desired layout.

This article will address the important points listed above. It will also provide you with the right way to think about certain things in Flexbox.

Well, let’s get right into it.

Prerequisite

Basic understanding of HTML and CSS

What is Flexbox?

Flexbox is a layout model that is useful for arranging a group of items in one direction. The direction may be a row or a column as opposed to the normal/default flow layout of:

Block - which only stacks items vertically (top to bottom), and
Inline - which only stacks items horizontally (left to right).

Flexbox gives tremendous control over the behavior of a group of items (as a whole), and each of the items in the group. It achieves this by using a flex container to represent the group of items and a flex item to represent each item in the container.

With Flexbox, you can:

Control the distribution of extra space among flex items in the container,
control the behavior of flex items as the size of the container is increased or decreased,
explicitly specify the gap that you want between flex items, among other things.

As you proceed in this article, you will discover more things that you can do with the flex layout.

The Flex direction property

The flex-direction property specifies the direction of items in the flex container. It also helps to determine the main axis (or primary axis), and the cross axis (or perpendicular axis). This is one of the most important properties you need to understand, so pay attention to it.

The default value of flex-direction is row, but it can accept three other values as shown in this code

.flex-container {
    flex-direction: row | column | row-reverse | column-reverse
}

The main axis and the cross axis do not have a fixed direction. Their direction depends on the value that flex-direction is set to. If the flex-direction is:

Row - the main axis spans horizontally from left to right, while the cross axis, is vertical (from top to bottom)

Column - the main axis spans vertically from top to bottom, while the cross axis, is horizontal (from left to right)

Row-reverse - same as when flex-direction is set to row. The only difference is the direction of the main axis which runs from right to left

Column-reverse - same as when flex-direction is set to the column. The only difference is the direction of the main axis which runs from bottom to top.

Bonus Tip: A Simple Trick to Instantly Identify the Two Flex Axes

You can use a simple trick to identify the main axis and cross axis. All you need to know is how to draw a simple line.

If you draw an imaginary line that cuts through the group of flex items, the direction that the line passes is the main axis.

To get the cross-axis, draw another imaginary line perpendicular to the main axis line.

The Components of a Flexbox: Flex container and Flex items

Understanding the relationship between these two is crucial to understanding Flexbox.

A flex container serves as a shell or box for the flex items. It is also the parent element that controls the layout and arrangement of the flex items inside it.

Just as a teacher controls the arrangement of students in a classroom, the flex container controls the arrangement of the flex items and can determine:

Whether the elements should be in a row or column (flex-direction)
the amount of space between flex items (gap, or justify-content)
whether the item will wrap into multiple lines (or not) if it cannot fit into one line (flex-wrap), and so on.

This does not mean that the flex items have no control of their own. They are like rebellious students that you can't completely restrict. They can determine:

Whether they want to grow or shrink to fill the available space (flex-grow/flex-shrink)
the order in which they want to appear along their direction (order)
their position relative to other flex items (align-self).

You're right, the italicized terms in brackets (in the bullet points above) are actual flexbox properties which we will soon discuss.

Content vs Items

Before proceeding to explain the various Flexbox properties, it is vital to differentiate between content and items. You will encounter these two terms many times when using Flexbox. Understanding these terms now will save you a lot of stress later.

Content - simply refers to a group of flex items that can be arranged along either of the flex axes i.e. main or cross axis. When you encounter this term, it refers to all the items in the container and not one item individually.
Items - refers to each item in a flex container individually. This term is usually found in flex item properties (which will soon be discussed) useful for directly targeting a specific flex item in a flex container.

Flexbox Properties

At this stage, you should already be familiar with how the Flexbox layout works at a broad level.

Here, we go into the specifics. You will learn about the various properties that you can use to move things around in a flex layout.

Pay special attention to the flex axes (i.e. main or cross axis) which the property explained can be applied.

Flex Container or Parent properties

These properties are applied to the flex container to control the arrangement or behavior of the flex item. They are:

display:

display defines the HTML element or the selector representing it as a flex container. This ensures that the elements under this container behave as flex items. A flex container can be any HTML container element like

.flex-container {
    display: flex;
}

justify-content:

justify-content decides the arrangement of flex items along the main axis. It also helps to distribute extra spaces among flex items (along the main axis).

.flex-container {
    justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly | start | end | left | right;
}

align-items:

align-items defines the behavior or alignment of items along the cross axis. Think of it as the equivalent of justify-content for the cross axis.

.flex-container {
    align-items: stretch | flex-start | flex-end | baseline | center | first baseline | last baseline | start | end | self-start | self-end
}

flex-wrap:

When there isn’t enough space to accommodate all the flex items on a line, flexbox tries to cram them together to fit that line. By setting flex-wrap to wrap, flex-items are pushed to the next line when there isn’t enough space.

.flex-container {
    flex-wrap: wrap | nowrap;
}

Check this codepen to see how it works

flex-wrap

@Wahab-Seidu

CodePen

In the codepen above, change the flex-wrap property on the flex-container to see the effect.

align-content:

This property works only when you have flex items on multiple lines. This is usually due to setting flex-wrap to wrap. You should use this property instead of align-items when you have more than one line of flex items along your cross axis.

.flex-container {
    align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline;
}

gap:

This property allows you to directly control the space between flex items. gap is a shorthand property that represents both row-gap and column-gap (in that order). For example, If you set gap to

.flex-container {
    gap: 20px; /* represents both row-gap and column-gap */
    gap: 20px 45px; /* row-gap is set to 20px while column-gap is set to 45px */
  /* You can also set them explicitly */
    row-gap: 20px;
    column-gap: 45px;
}

You can play around with the gap properties in the codepen (in the CSS) below to see how it works

gap

@Wahab-Seidu

CodePen

The gap property only specifies the space between flex items. Unlike justify-content, It does not control the space between the edge of the container and the first item (or the last flex item).

Properties For the Flex items:

Now that you know the flex container properties, you will learn about properties that can be used on flex items.

These properties control the behavior of individual flex items and not the group as a whole. Some of these properties are:

flex-basis:

This property works as the width or height of a flex item. When the flex-direction property is row, it sets the width of the flex item. Conversely, it sets the height when flex-direction is column.

Even though flex-basis works as width or height, it is different from the “width” or “height” in the default layout.

Flex-basis is not a fixed dimension that is always applied no matter what. It is more of a suggestion of what size the width or height of the flex item should be if there is enough space to contain that size.

For the normal width or height properties, if the container available cannot accommodate their size, the item will overflow i.e. jump out of its container. Whereas in the case of flex-basis, the item will try to fill all the space available in its container even though it will do so at a size smaller than its original size.

As an example, check this codepen

Flex-basis

@Wahab-Seidu

CodePen

The above codepen shows one flex container and one normal container. In the CSS, each container was declared a width of 200px.

When we declare a flex-basis (representing width) of 300px on our flex container, it sits comfortably within it without spilling out. Conversely, when we set the width of our normal item to 300px, it overflows.

Play around with the flex-basis and width to get a hang of things.

NOTE

Understanding JavaScript Errors

Wahab Seidu — Tue, 29 Aug 2023 03:06:44 GMT

Introduction

The ability to understand errors and fix them with error messages is a vital skill that every developer should have. Even though errors might seem daunting at first glance, they are quite easy to understand and very helpful.

An Error usually contains an error message, which points you in the right direction, by giving you the information required to resolve it.

Apart from helping you to effectively debug your code, error messages also help in receiving help from other developers when you get stuck.

This article will simplify JavaScript errors and provide you with the necessary knowledge to start resolving them in no time.

Prerequisite

Basic knowledge of JavaScript

Types of JavaScript errors

There are several types of JavaScript errors, this article will only cover the major ones you are most likely to encounter while writing JavaScript as a beginner.

NOTE: The statement "throw an error/ throw error" used many times in this article, is the technical term for when an error occurs, or is displayed on the console.

Reference error

A reference error (usually written in the console as ReferenceError) is thrown when you reference or use a variable that does not exist (has not been declared or defined). As an example, this code

const fruit = "Apple";
let randomNumber = 21;

console.log(food);

will throw the following error because the variable food was neither declared nor defined.

Note that if a variable was declared but not defined, the browser console simply displays undefined (and not a ReferenceError). For example, this code

let myName;
console.log(myName);

will simply display undefined as shown below because the variable myName was only declared but not defined.

This means to avoid a reference error, you should at least declare the variable you want to reference.

Syntax error

You will get a syntax error when your code cannot be parsed by the JavaScript engine because it is not written properly. It simply means that your code does not follow the grammatical rules of JavaScript.

This may be due to the following:

Missing opening or closing parenthesis.
Improper use of reserved keywords like let, const, for, etc.
Use of incorrect cases (uppercase or lowercase) for reserved keywords, among others.

let food = "Rice";
// any of the following will throw a syntax error
console.log(food; // missing parenthesis
let for = "you"; // improper use of reserved keyword
C0nsole.log(food); // use of incorrect case -- "C and O in console should be in lowercase"

Type error

It's difficult to pinpoint a specific reason for getting a type error as they are thrown for different reasons. But the underlying reason a type error is thrown is due to inappropriate usage, or modification of a particular data type. As an example, the code

let myName = "John";
let operation = myName.toFixed(2);
console.log(operation);

will throw this error

Here, we have an error and you probably already know the reason if you are familiar with the .toFixed() method.

The .toFixed() method is used when we want a number to have a fixed number of digits after the decimal point. This tells us that it should never be used with a string as we've done in our code and this is why it throws a type error!

The error message displayed by a TypeError seems somewhat confusing. We know that .toFixed() is a function (i.e. as all javascript methods are essentially functions) yet the error message tells us that it's not a function.

To understand this error message, it needs to be put into context. In this context, the error message tells us that .toFixed() is "not a function (or method)" that can be used with a string hence "myName.toFixed(2) is not a function".

Let's use a more practical example. This code

const greeting = "Hello";
const currentUser = "Smith";
const message = greeting.push(currentUser);

In this case, the original intention was to add the two strings stored in greetings and currentUser respectively. However, we wrongly used push() (an array method) for that purpose, which resulted in a type error.

If we used a string method like .concat() (which adds two strings together) our code will work as planned.

The most common reason for getting a type error is trying to modify a constant value i.e. a variable defined with the keyword const

const color = "Black";
color = "White";

The right way to think about type errors is that they either indicate when you are using a particular data type wrongly, or you're using the wrong method for a data type.

Logical error

This error occurs when the program or application fails to work as expected due to a mistake in your code structure or logic. The program works but not as expected. As an example, this code

function calculateTotalProfit(pricePerUnit, costPerUnit, quantitySold) {
  return pricePerUnit - costPerUnit * quantitySold; // will multiply price by quantity first
}

let totalProfit = calculateTotalProfit(15, 10, 6);
console.log(totalProfit); // will display -45 in error instead of 30.

will give an incorrect output.

As you might have guessed, our intention here is to write a function that deducts the costPerUnit from the pricePerUnit of a product and multiply the result by the quantitySold.

However, we get -45 (in error) instead of 30 when we use our function. This is because the return statement handles the multiplication (of costPerUnit by quantitySold) before subtracting the result from pricePerUnit. Of course, this is not what we want.

We can easily rectify this error by wrapping the subtraction in parenthesis. This ensures that costPerUnit is deducted from pricePerUnit before multiplying it by quantitySold.

function calculateTotalProfit(pricePerUnit, costPerUnit, quantitySold) {
  return (pricePerUnit - costPerUnit) * quantitySold; // will handle the subtraction first
}

let totalProfit = calculateTotalProfit(15, 10, 6);
console.log(totalProfit); // will give the correct output, 30

No error message? Yeah, an error message is not displayed for a logical error. Why? Nothing is interrupting the execution of the program. Your program will run but will supply an unexpected output.

The Analysis of an Error

An error itself is a JavaScript object that contains information about the type of the error and a message providing further details. This information is produced whenever the execution of the code is interrupted due to an incorrect entry in the code.

As an example, take a look at this error message below

In this error, you can identify the type of the error and the error message. The first line shows a ReferenceError (type) which says "food is not defined" (message) which gives us a sneak peek into what to look for.

The second line is a link that specifies the file where the error came from (in this example, script.js), and the line of code causing the error in that file (in this case, line 4). With this information, you can easily go to the line causing the error and make necessary corrections.

Some browsers provide additional information on the specific character/column causing the error. In our example (script.js:4:13), this would be the 13th character on line 4. You will find this feature very useful when the line of code that throws an error is very long or complex.

If you are coding along using a browser console, you can just click the link showing the file and it will take you to that particular line in the sources panel of the developer tools.

Take a look at another example:

const firstNum = 5;
const secondNum = 10;
const thirdNum = 8;

function multiply() {
  return result;
}

function display() {
  multiply();
}

display();

As you can see from this code, a function returns a variable that has not been defined, and that function is called within another function. This throws a ReferenceError as follows:

You can see that the error message refers to different lines of the code file. This is called a stack trace and indicates the origin of the error and the order of events leading to the error. In this case, the slack trace shows that

result is not defined and cannot be used in the scope of multiply(), which is declared on line 6, column 3.
display() called multiply() (an error-prone function), which was declared on line 10, column 3.
display(), was called on line 12.

Analyzing the error as above will help you break it down into different parts, with each part giving specific information about the error. Once you can decode the information given by these parts, you can easily

Find the code responsible for the error,
Identify the reason for the error, and
Resolve the error.

Simple tips for resolving JavaScript errors

When coding you will most likely need to resolve errors now and then. If you have been following this article so far, you should now know how to find the particular line, or lines of code responsible for your error.

After tracing the error to its source, the following tips can help you resolve errors effectively.

Carefully study the error and try to interpret it. At this point, you should already know how.
If you are unable to understand the error, Google it. You can also use AI tools like chatGPT as an alternative. The idea here is to get an explanation of why you received the error and possibly get a hint to resolve it.
Use the console. console.log() is a popular option for debugging JavaScript among developers. You can use it to get the value of a variable, array, or any other data type to help you get a clearer picture of things.
You should note that console.log() does not directly resolve your errors. It is just useful to know the state of your code at specific points which can be crucial in resolving logical errors. For example, you can use console.log() within your condition statements to check if it works.
```
 let a = 20;
 if (a > 12) {
   console.log("a is greater than 12");
 } else {
   console.log("a is NOT greater than 12");
 }
```
You can also use it to check the output of functions and check whether they work as intended.
```
 function multipl(x, y) {
   return x * y;
 }

 console.log(multiply(3, 7));
```
For more complex errors or troubleshooting, you might want to use the debugger to debug your code as this is more appropriate. This video from Chrome DevTools should help.
You can also check StackOverflow for a fix. Chances are, someone already asked the same or a similar question about the error and there is an answer to help you. If the question has not been posted before, post the question. When doing this, you should include what you've done so far to resolve it on your own, and relevant screenshots of your code.
Only use StackOverflow after trying to resolve the error on your own using the tips above. You don't want to go through the stress of posting a question and waiting for an answer for a fix that can easily be found through a Google search.

Conclusion

To conclude, JavaScript errors are roadblocks that either prevent your code from working at all or as intended. By gaining the ability to interpret and resolve them, you have successfully removed a major roadblock in your coding adventure.

This article has provided you with the required knowledge to identify, find and resolve your errors on your own. It has also provided you with simple tips to receive meaningful help from others.

Don't hesitate to like this article, and share your experiences on JavaScript errors you've encountered in the past. Your contributions are valued and can help us learn collectively.

Good luck and happy coding!