Mastering Flexbox Basics: A Comprehensive Guide
Tags: flexbox, programming, webdev, beginners
Published: 2023-11-24 09:34:21


Have you ever encountered alignment challenges or want to get better at aligning content as a developer?
Those days of using floats, positioning, and complicated calculations to align content were truly frustrating.

But don't worry because Flexbox is here. This game-changing tool allows developers to effortlessly create complex and responsive web layouts.

In this article, we will explore the foundations of Flexbox, diving into its essential concepts and properties. Prepare yourself to revolutionize your web design skills with Flexbox!


## What is Flexbox?
Flexbox also referred to as Flexible Box Layout, is an incredible CSS layout model that was introduced in CSS3. It empowers web designers to create flexible and responsive layouts for web pages. This layout model operates in a single direction, either vertically (from left to right) or horizontally (from top to bottom), making it a one-dimensional layout model.

One of the key benefits of Flexbox is its efficiency in arranging, aligning, and distributing elements within a container. By utilizing Flexbox, web interfaces can be built with ease, ensuring that they automatically adapt to different screen sizes and devices.


## Concepts of Flexbox
When it comes to understanding and utilizing Flexbox, there are a few key concepts to keep in mind.

**They are:**
<li> Flex Container 
<li> Flex items
<li> Axes

1. Flex Container
The Flex Container, also known as the parent container, is where the Flex items are housed. In other words, the Flex items are contained inside the Flex container, which can be considered as the parent. The Flex container can have one or more Flex items as the children.

2. Flex Items
The Flex items, also known as the child or children, are the elements that are contained inside the Flex container. These Flex items can be arranged either horizontally (along the row axis) or vertically (along the column axis). By default, they are displayed in a single row.

Before transforming a container into a Flexbox, you need to set the display property to either `flex` or `inline-flex`, depending on your desired design. This allows the parent container to become a Flex container and enables the Flexbox functionality.

**Example: Code illustrating the syntax for flexibility of flexbox**

```css
.flex-container
{
display: flex;
/_or you can set the value to inline_/
display: inline;
}
```
It's important to note that Flexbox operates on items that are directly inside a container. Therefore, it's crucial to properly structure your HTML markup to ensure the correct implementation of Flexbox.

**Below are code illustrations describing Flex containers and Flex items.**

Code html
```html
<html>
	<div class="flex-container">
		<div class="flex-item box-1">Box 1</div>
		<div class="flex-item box-2">Box 2</div>
		<div class="flex-item box-3">Box 3</div>
	</div>
</html>
```


code css
```css
body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
}

.flex-container {
	border: 8px solid purple;
	display: flex;
	background-color: black;
	height: 300px;
}

.flex-item {
	height: 100px;
	width: 100px;
	color: #2b0606;
	font-size: 2rem;
	margin: 4rem;
	padding: 2rem;
	text-align: center;
	font-weight: bold;
}

.box-1 {
	background-color: greenyellow;
}
.box-2 {
	background-color: blueviolet;
}
.box-3 {
	background-color: grey;
}
```
The Output
![illustration of the flex container and flex item](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vp2l4ndb0ayxmcc6e6l.png)

NB: You can style the CSS depending on how you want your output to look.
The border, background color, and other properties on the code source above are included for better illustration.

3. The axes
The axes consist of the main axis and the cross axis.

-   **Main axis**
The main axis is a horizontal line that extends from left to right.
The starting point on this axis is referred to as the main start, while the ending point is known as the main end.
The measurement of this axis is referred to as the main size.

The direction in which the main axis runs is determined by the property `flex-direction`, which can be set to either a row or column.

-  **Cross axis**
The cross-axis is perpendicular to the main axis.
The starting point on this axis is called the cross start, and the ending point is known as the cross end.
The length of this axis is referred to as the cross size.

Image illustrating the main axis and the cross axis
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zf63mvsvyo05uws61h51.png)

## Flexbox Properties
Flexbox properties are essential for governing the behavior of flex items within a flex container.

These properties can be divided into two groups: 
 <li>container properties
 <li>flex item properties

1. Container Properties
Container properties include flex-direction, flex-wrap, flex-flow, justify-content, flex-grow, flex-shrink, and align-items.
These properties control how flex items are arranged and aligned within the flex container.

2. Flex Item Properties
Flex item properties include order, flex, flex-grow, flex-shrink, and align-self.
These properties dictate the individual behavior of each flex item within the container, such as their order, flexibility, and alignment.




### Let's explain container properties

## 1. Flex-Direction

Flex direction property determines the main axis and its direction, which in turn determines whether the flex items are positioned in a row or column inside the container.

The possible values for this property are:

- `flex direction-row` : 
 By default, the main axis of Flexbox runs from left to right.

```css
.flex-container {
	flex-direction: row;
}
```

Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzi13esx9tkwqlol46oz.png)
  

- `Flex direction column` :
By setting the flex-direction property to the column, you can change the direction of the main axis to vertical.

```css
.flex-container {
	flex-direction: column;
}
```

Output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cfwnikedr6hmqy5s8rg.png)

-  `flex-direction row-reverse`:
This property value reverses the order of the flex items in a row.

```css
.flex-container{
flex-direction: row-reverse;
}
```
Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zx3nhe3zgihou190czt.png)

-  `reverse column`
This property value reverses the order of the flex items in a column.

```css
.flex-container {
	flex-direction: column-reverse;
}
```

Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecnx8ek6jq9141wkmu5d.png)

## Flex wrap

Flex containers can have multiple lines of items if space is limited.
The flex-wrap property controls whether the items should wrap onto new lines or stay on a single line. Its values include nowrap, wrap, or wrap-reverse.

- `flex-wrap: nowrap`
This is the default value and ensures that the flex items stay on a single line, even if it causes overflow.

```css
.flex-container {
	flex-wrap: nowrap;
}
```
output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ed6t2j0g5vnx64dkyafp.png)

- `flex-wrap`: wrap
By setting the flex-wrap property to wrap, the flex items are allowed to wrap onto new lines when necessary.

```css
.flex-container {
	flex-wrap: wrap;
}
```

Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brmk4v2vnpr7vumbjui0.png)

- `flex-wrap: wrap-reverse`
This property value wraps the flex items onto new lines but in reverse order.

```css
.flex-container {
	flex-wrap: wrap-reverse;
}
```
Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc62kma63ki0v3s8rqid.png)

## Flex Flow
Flex-flow is a combination of the flex-direction and flex-wrap properties, allowing you to specify both the main axis and the wrapping behavior in a single property.

- `flex-flow: column nowrap`

Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy6obzjgd39tt4qs0hxv.png)

## Justify Content
The justify-content property controls how the flex items are spaced along the main axis of the flex container. It allows for spacing between items and redistribution of extra space.

**Here are various values for the justify-content property**:

- `flex start`
This aligns the items at the start of the main axis.

```css
.flex-container {
	justify-content: flex-start;
}
```

Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68t0gz0e9mmfv9otgxx3.png)

- `flex end`
This aligns the items at the end of the main axis.

```css
.flex-container {
	justify-content: flex-end;
}
```

Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30niiot5ld2jga2sqbsb.png)


- `Center`
It centers the items along the main axis.

```css
.flex-container {
	justify-content: center;
}
```

Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvtpf0dazv9h6vhydg83.png)

You can also set the flex-direction to the column and play around justify content.
Example:

```css
.flex-container {
	flex-direction: column;
	justify-content: center;
}
```


- `Space Between`

This distributes the items evenly along the main axis

Code

```css
.flex-container {
	justify-content: space-between;
}
```

Output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3bkcipfa9z1ikjdvy8w.png)


- `Space around`
Distribute the items evenly along the main axis

```css
.flex-container {
	justify-content: space-around;
}
```

Output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1ox1qrgb4am12nj5dah.png)


- `space evenly`
Distribute the items evenly along the main axis, including space before the first item and after the last item.

Code
```css
.flex-container {
	justify-content: space-evenly;
}
```

Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfhqzsfuteiexpvmx5j1.png)

## Align-Items

The align-items property controls how the flex items are spaced along the cross-axis of the flex container.

**Here are the different values for align-items:**

- `flex-start`
This aligns the items at the start of the cross-axis. This is the default value. Just like justify content.


```css
.flex-container {
	align-items: flex-start;
}
```



- `center value`
Centers the items along the cross-axis.

```css
.flex-container {
	align-items: center;
}
```

Output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhgeit3cmy6h4m3cleve.png)

- `Baseline`
Align the items such that their baselines are aligned.

```css
.flex-container {
	align-items: baseline;
}
```

Output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elbwil5gyjm3rlwy0bo5.png)

- `Stretch`
Stretches the items to fit the height of the container.
You can set the height property to notice the effect.

```css
.flex-container {
	display: flex;
	height: 500px;
	align-items: stretch;
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvh3vund0tolfhtbbfxl.png)

- `End`
Align the items at the end of the cross-axis.

```css
.flex-container {
	align-items: end;
}
```

Output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yu2aqgniwflx2hxxe1zj.png)
You can also play around with justify content and align items' property together.

Example

```css
.flex-container {
	justify-content: space-around;
	align-items: flex-end;
}
```

## Align Content
The align-content property is similar to align-items, but it applies to the container itself instead of the individual items. This can be useful if you want to align the container relative to the page or another container.

Note that you need to have a height set and enable wrapping for the property to work properly.

Let's demonstrate using align content with the value center, you can also apply other values as well.

```css
.container {
	flex-wrap: wrap;
	align-content: center;
}
```

Output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lthfxs1amnzwoy55r03s.png)

### Let's discuss the properties of flex items.
When applying flex item property you can either target the whole item or individual item depending on your preference.

- `Order`
The order property controls and specifies the visual order in which flex items are displayed within a flex container.

It does not affect the order in the HTML markup.
By assigning different order values to flex items, you can rearrange their display order.

```css
body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
}

.flex-container {
	border: 4px solid purple;
	display: flex;
	background-color: black;
	height: 200px;
}

.flex-item {
	color: #2b0606;
	font-size: 2rem;
	padding: 2rem;
	text-align: center;
	font-weight: bold;
}

.box-1 {
	background-color: greenyellow;
	order: 1;
}
.box-2 {
	background-color: blueviolet;
	order: 1;
}
.box-3 {
	background-color: grey;
}
.box-4 {
	background-color: codetblue;
	order: 1;
}
.box-5 {
	background-color: chocolate;
}
.box-6 {
	background-color: goldenrod;
}
```

The output when you set the order property to 1 on item 2

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xuw46rtab1ic3t9fgin.png)

The output when you set the order property to 1 on items 2 and 4
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1gcmccqcv6kpkrw0r6l.png)

## Flex grow
The flex-grow property determines how much an item can grow or stretch to fill the available space in a flex container.
A value of 1 means the item can grow to fill the available space, while a value of 0 means it will not grow at all.
You can also use fractional values, like "0.5", which means the item will grow half as much as other items or you can set it to the value of your choice.

**Before applying Flex grow**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcxocgoldwic02cj5gtz.png)

**After applying flex-grow**
Example 1:

```css
.box-1 {
	background-color: greenyellow;
}
.box-2 {
	background-color: blueviolet;
	flex-grow: 2;
}
.box-3 {
	background-color: grey;
}
.box-4 {
	background-color: codetblue;
}
.box-5 {
	background-color: chocolate;
}
.box-6 {
	background-color: goldenrod;
}
```

Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1njh9udvziaco7md2ao7.png)

Example 2:

```css
.box-1 {
	background-color: greenyellow;
}
.box-2 {
	background-color: blueviolet;
	flex-grow: 1;
}
.box-3 {
	background-color: grey;
	flex-grow: 1;
}
.box-4 {
	background-color: codetblue;
}
.box-5 {
	background-color: chocolate;
}
.box-6 {
	background-color: goldenrod;
}
```

Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snq8jfb11b7flvsbzilb.png)
You can set it evenly by targeting the flex item

Example 3:

```css
.flex-item {
	color: #2b0606;
	font-size: 2rem;
	padding: 2rem;
	text-align: center;
	font-weight: bold;
}
.box-1 {
	background-color: greenyellow;
	order: 1;
}
.box-2 {
	background-color: blueviolet;
}
.box-3 {
	background-color: grey;
}
.box-4 {
	background-color: codetblue;
}
.box-5 {
	background-color: chocolate;
}
.box-6 {
	background-color: goldenrod;
}
```

Output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2sn51cpk5mvlmn2ydqx.png)

## Flex shrink
This is the opposite of "flex-grow".
It determines how much an item can "shrink" to fit the available space.
A value of "1" means that the item can shrink to fit the space, so 1 is the default value.
A value of "0" means that it will not shrink at all. You can also use fractional values, like "0.5", to control the amount of shrinkage.

After applying the flex-shrink property, try resizing the browser to notice the effect.

If you don't want the items to shrink then apply the code below to the whole item

```css
.flex-container {
	display: flex;
}
.flex-item {
	flex-shrink: 0;
}
```

### Flex basis

The flex-basis property defines the initial size of a flex item before any remaining space is distributed. It can be specified in pixels (px), percentages (%), or with the value of "auto".

By default, flex items have a flex-basis of "auto", meaning their size is based on their content.

The output below is a flex-basis property with a value of 200px applied to the item on Box 2.

```css
.flex-item {/*properties here*/}

.box-3 {
flex-basis:200px}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bvgic4lt92zr1f46914.png)

## Align self
This property allows an individual flex item to override the alignment specified by the flex container's align-items property. It takes values such as flex-start, flex-end, center, baseline, or stretch.

```css
.flex-item {
	color: #2b0606;
	font-size: 2rem;
	padding: 2rem;
	text-align: center;
	font-weight: bold;
	flex-grow: 1;
}
.box-1 {
	background-color: greenyellow;
	order: 1;
}
.box-2 {
	background-color: blueviolet;
	align-self: flex-start;
}
.box-3 {
	background-color: grey;
}
.box-4 {
	background-color: codetblue;
	align-self: flex-end;
}
.box-5 {
	background-color: chocolate;
}
.box-6 {
	background-color: goldenrod;
	align-self: flex-center;
}
```

- `align-self: flex-start`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7njr4brocext120vehg.png)

- `align-self: flex-end`;
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2ymocxbg958asdwt1k5.png)


- `align-self: flex-center`;
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxgx8xcw4gleancgs5ti.png)


## Flex
The flex property is a shorthand property that combines the flex-grow, flex-shrink, and flex-basis properties in one declaration. It is commonly used to set the flex properties of flex items.

```css
.flex-container {
	display: flex;
}
.flex-item {
	flex: 1 0 100px;
}
```

Using the shorthand declaration above is equivalent to the following individual declarations below:

```css
.flex-item {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 100px;
}
```



## Conclusion

Understanding the basics of Flexbox is essential for creating modern, responsive web layouts.

By mastering the concepts of flex containers, flex items, the main and cross axes, and the various Flexbox properties, you will have the skills to design flexible and dynamic web UIs that adapt flawlessly to different devices and screen sizes.

So, embrace Flexbox and explore its vast possibilities for crafting stunning web interfaces.