XhulQornayn Ibrahim's Blog

Understand "CSS FLEXBOX" in exactly 5 minutes.

Understand "CSS FLEXBOX" in exactly 5 minutes.

XhulQornayn Ibrahim's photo
XhulQornayn Ibrahim
·

5 min read

Hi, my name is Qornayn. welcome to my blog, I'm glad you found your way here.

You found this article because you realize how powerful CSS flexbox is and how important it is for you as a frontend developer to understand its use cases. Well, I'm happy to reassure you that you've made your stop just at the right place. So without further ado, let's talk about how you can understand CSS Flexbox in just 5 minutes.

CSS flexbox is a powerful tool that helps web developers create dynamic and responsive layouts for their websites. Bear in mind that this guide will cover the basics of CSS flexbox and introduce you to its properties, and how to use it to create amazing layouts.

What is CSS flexbox?

CSS flexbox is a layout module that enables developers to create flexible and responsive layouts using a single container element (parent element) and its child elements. With flexbox, developers can arrange and align items within a container in any direction, regardless of the container's size or the number of items it contains. This makes it a powerful tool for creating complex and dynamic layouts that work across multiple screen sizes and devices.

Imagine an empty crate as "the container" and "eggs" as its child elements, the many styles, layouts or methods of arranging eggs into this crate can be regarded as the functions of a CSS flexbox in website development.

How to use CSS flexbox

To use CSS flexbox, the first thing to do is to start by creating a container element in your code editor and adding the declaration "display: flex" as one of its properties. This tells the browser to treat the container as a flex container and its child elements as flex items. Here's an example:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
}

Flex-direction

The "flex-direction" property determines the direction in which the flex items are laid out within the container. Going by the previous example of a crate with eggs; say you are provided with a crate and five eggs, a flex-direction property indicates what direction you'd like to arrange your eggs, either vertically or horizontally. By default, the "flex-direction" property is set to "row", which means that the items are laid out in a row from left to right. However, you can also set the "flex-direction" property to "column" to lay out the items in a column from top to bottom. Here's an example:

.container {
  display: flex;
  flex-direction: column;
}

In the code snippet above, you could see that we have a container element and two declarations in it, the first is the display property that sets the container element as a flex container and also a flex-direction property set to column that tells the browser to arrange the child elements in a column from top to bottom.

Justify-content

The "justify-content" property determines how the flex items are aligned within the container along the main axis. The main axis is the axis defined by the "flex-direction" property. There are several values you can use for the "justify-content" property, including:

  • "flex-start": Aligns the items to the start of the container.

  • "flex-end": Aligns the items to the end of the container.

  • "center": Centers the items within the container.

  • "space-between": Distributes the items evenly along the main axis with space between them.

  • "space-around": Distributes the items evenly along the main axis with space around them. Here's an example:

.container {
  display: flex;
  justify-content: center;
}

In this example, we have set the "justify-content" property to "center", which centers the items within the container along the main axis.

Align-items

The "align-items" property determines how the flex items are aligned within the container along the cross-axis. The cross axis is the axis perpendicular to the main axis. There are several values you can use for the "align-items" property, including:

  • "flex-start": Aligns the items to the start of the container along the cross axis.

  • "flex-end": Aligns the items to the end of the container along the cross axis.

  • "center": Centers the items within the container along the cross axis.

  • "stretch": Stretches the items to fill the container along the cross axis. Here's an example:

.container {
  display: flex;
  align-items: center;
}

In summary, CSS flexbox is a layout module that allows web developers to create dynamic and responsive layouts using a container element and its child elements. It offers a range of properties that allow developers to control the direction, alignment, and spacing of flex items within a container. The main properties of CSS flexbox include "display: flex", "flex-direction", "justify-content", and "align-items". By using CSS flexbox, developers can create flexible and responsive layouts that adapt to different screen sizes and devices.

Now, you are even one big step closer to making your dream website come to life.

If you found this article useful, please do leave some reactions!! Thank You.

Here are some useful resources that you can use to learn more about CSS flexbox and find code examples:

CSS Tricks - A comprehensive guide to CSS flexbox with plenty of examples and demos: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

W3Schools - A beginner-friendly guide to CSS flexbox with examples: https://www.w3schools.com/css/css3_flexbox.asp

MDN Web Docs - A detailed guide to CSS flexbox with code examples and interactive demos: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Codepen - An online code editor with a collection of CSS flexbox examples: https://codepen.io/search/pens?q=flexbox

CSSGeneral Programmingflexboxflex cssCSS3