One of the most powerful tools in Tailwind's arsenal is its set of Flexbox utilities. Flexbox lets you create dynamic, responsive layouts without writing custom CSS, and Tailwind makes it incredibly intuitive with simple class names.

In this tutorial, we'll walk through everything you need to know about using Flexbox in Tailwind, from the basics to advanced patterns. Whether you're a beginner or looking to level up your layouts, by the end, you'll feel confident building anything from card grids to complex dashboards.

Table of Contents

• Prerequisites

• What is Flexbox?

• How Tailwind CSS Makes Flexbox Easy to Use

• How to use flex in Tailwind

• Flex Item Sizing: Basis, Grow & Shrink

• Controlling Flex Direction

• Fine-Tuning Flexbox Layout

• How to Justify and Align Flex Items in Tailwind

• Practice Flexbox with Interactive Games

• Conclusion:

Prerequisites

Before diving into Flexbox with Tailwind CSS, it helps to have a few basics in place so you can follow along comfortably.

Basic Knowledge:

• A foundational understanding of HTML (how elements and containers work).

• Basic familiarity with CSS (especially properties like display, width, and height).

• A general idea of how responsive design works (helpful but not required).

You do not need to be a Flexbox expert, as we’ll cover the important concepts as we go.

Tools You’ll Need:

• A code editor like VS Code (or any editor you prefer)

• A browser for testing layouts

• A project with Tailwind CSS installed

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model designed to make it easier to design flexible, responsive layouts without using floats or complicated positioning tricks.

Before Flexbox, aligning elements vertically, spacing items evenly, or making layouts adapt to different screen sizes was often frustrating and required hacks. Flexbox solves these problems by providing a simple and predictable way to control alignment, spacing, and ordering of elements inside a container.

The main concept is simple:

• You have a flex container

• Inside it are flex items

• The container controls how its items are laid out

Once an element is set to display: flex, its children automatically become flex items.

.container {
  display: flex;
}

How Tailwind CSS Makes Flexbox Easy to Use

Flexbox is powerful, but writing custom CSS for every layout can become repetitive and time-consuming. Tailwind CSS simplifies this by providing utility classes that map directly to Flexbox properties, allowing developers to build layouts quickly without writing custom CSS.

Instead of switching between HTML and CSS files, Tailwind lets you apply Flexbox behavior directly in your markup, making layouts more readable and faster to develop. It turns Flexbox's sometimes verbose properties into short, memorable utilities. No more remembering justify-content: space-between; just write justify-between.

Benefits:

• Responsive by default (add md:, lg:, and so on)

• Composable (combine classes freely).

• No custom CSS needed for most cases.

How to Use Flex in Tailwind

Flexbox is one of the most powerful layout systems in modern CSS, and Tailwind CSS makes it extremely approachable by exposing Flexbox behavior through simple utility classes. Instead of writing custom CSS, you compose layouts directly in your HTML using predefined classes.

1. flex: The flex Class is the foundation of Flexbox in Tailwind.

2. flex-1: Allows the element to grow and shrink and forces it to take up the remaining available space.

3. flex-auto: It makes an item flexible while respecting its content size – that is, it only grows and shrinks as needed.

4. flex-none: Disables growing and shrinking for an item.

Here is a basic example that shows where to place these classes:

<!-- this is the container -->
<div class="flex">
  <!-- these are the items inside the container -->
  <div class="flex-1">Item 1</div>
  <div class="flex-auto">Item 2</div>
  <div class="flex-none">Item 3</div>
</div>

Flex Item Sizing: Basis, Grow, & Shrink

Three fundamental properties control how elements size themselves inside a flex container:

• flex-basis

• flex-grow

• flex-shrink

Rather than thinking in fixed widths and heights, Flexbox uses a dynamic space-distribution model. Each flex item starts with an initial size, then grows or shrinks depending on the available space and the rules defined by these three properties.

flex-basis

flex-basis controls the initial size of a flex item before flex-grow or flex-shrink kick in. Think of it as the item’s starting width or height (depending on flex direction).

<div class="flex ...">
	<div class="... basis-1/5">01</div>
  <div class="...basis-4/5">02</div>
</div>

Here's what this makes:

flex-basis's most used utility classes are:

• basis-auto: This means the item’s initial size is based on its content size or any explicitly defined width/height. It doesn't force a specific starting size. Instead, it respects intrinsic sizing.

• basis-0: This makes the item start at 0 width (or height in column layouts) before space is distributed. It’s commonly used with grow to evenly distribute space regardless of content size.

• basis-full: The item initially takes up the entire width (or height) of the container before shrinking or wrapping.

• basis-xs/md/lg/xl..: Built-in values.

• basis-<fraction>: Giving a value with a dynamic such as 1/2, 4/5, and so on.

• basis-<number>: Uses Tailwind’s spacing scale (in rem units).

• basis-[<value>]: Syntax to set the basis based on a completely custom value.

flex-grow

flex-grow controls how much a flex item expands to fill extra space in the flex container. It determines how leftover space is distributed among flex items after their initial sizes.

<div class="flex ...">
	<div class="... grow">01</div>
  <div class="...grow-0">02</div>
  <div class="...grow">03</div>
</div>

Here's what this creates:

flex-grow's most used utility classes are:

• grow: The item will grow to take up available extra space. If multiple items use grow, they share space equally (unless different grow values are specified)..

• grow-0: The item will not expand beyond its initial size, even if extra space is available.

• grow-<number>: If one item has grow-2 and another has grow-1, the first item gets twice as much extra space as the second.

• grow-[<value>]: Allows a custom grow value (e.g. grow-[3]).

flex-shrink

flex-shrink controls how much a flex item shrinks when there isn’t enough space in the flex container. It determines how items reduce their size relative to each other when the container overflows.

<div class="flex ...">
	<div class="... grow shrink-0">01</div>
  <div class="...shrink">02</div>
  <div class="...grow shrink-0">03</div>
</div>

Here's what this creates:

flex-shrink's most used utility classes are:

• shrink: The item is allowed to shrink when necessary to prevent overflow.

• shrink-0: The item will not shrink, even if space becomes limited. This may cause overflow if other items cannot compensate.

• shrink-<number>: Sets proportional shrinking behavior. An item with shrink-2 will shrink twice as much as one with shrink-1.

• shrink-[<value>]: Syntax to set a completely custom shrink value.

Controlling Flex Direction

In Tailwind CSS, the direction in which flex items are laid out is controlled using flex-direction utilities. These utilities define whether items are placed horizontally or vertically, and in which order.

flex-row

flex-row is the default flex direction in both CSS Flexbox and Tailwind. When it is applied, flex items are laid out horizontally along the main axis, starting from left to right (in left-to-right languages).

<div class="flex flex-row">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

This outputs:

Use case: Navigation bars, horizontal button groups, toolbars.

flex-row-reverse

The flex-row-reverse utility lays out flex items horizontally, but in the opposite direction from right to left. While the visual order of items is reversed, the HTML source order remains unchanged, which is important for accessibility and screen readers.

<div class="flex flex-row-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Output:

Use case: Forms, cards, sidebars, vertical menus.

flex-col

The flex-col utility changes the flex direction to vertical, stacking items from top to bottom. In this case, the main axis runs vertically.

<div class="flex flex-col">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div> 

Output:

Use case: Forms, cards, sidebars, vertical menus.

flex-col-reverse

In flex-col-reverse, items are stacked vertically, but in reverse order, starting from bottom to top (that is, vertically reverse order).

<div class="flex flex-col-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div> 

Here's the output:

Use case: Chat messages, timelines, or when newer content should appear at the bottom.

Now you know a bit about managing flex-directions using tailwind utility classes. You can mange the stack depending on your needs.

Responsive Control

Tailwind also allows you to change flex direction at different breakpoints so you’ll get a clean layout across different devices.

<div class="flex flex-col md:flex-row">
	.....
</div>

This stacks items vertically on small screens and switches to a horizontal layout on medium screens and above.

Fine-Tuning Flexbox Layout

Once a container is set to use Flexbox, the real power comes from controlling how flex items behave inside it. This is where properties like wrap, order, and gap become essential. These features determine how items flow, how they're visually arranged, and how much space exists between them.

In real-world layouts such as card grids, navigation menus, and dashboards, elements rarely fit perfectly in a single row or follow a fixed order across all screen sizes. Flexbox provides solutions to these challenges, and Tailwind CSS exposes them through simple, intuitive utility classes.

• Wrap helps manage what happens when items exceed the available space

• Order allows you to rearrange elements visually without changing the HTML structure

• Gap controls spacing between items in a clean and predictable way

Let’s dive into the depths of these fine-tuning flexbox properties.

flex-wrap

By default, Flexbox tries to fit all items into one line. If there isn’t enough space, items will shrink to squeeze in. flex-wrap allows flex-items to move onto the next line instead of shrinking.

<div class="flex flex-wrap">
	<div>01<div>
	<div>02<div>
	<div>03<div>
</div>

Utility classes:

• flex-nowrap: (default) All items stay on one line.

• flex-wrap: Items wrap onto multiple lines.

• flex-wrap-reverse: Items wrap, but in reverse order.

flex-order

flex-order controls the visual order of the stack/flex-items without changing the HTML structure. Each item has an order value. Items with lower order values appear first.

<div class="flex">
	<div class="order-3 ...">01<div>
	<div class="order-1 ...">02<div>
	<div class="order-2 ...">03<div>
</div>

Utility classes:

• order-1 to order-12: Sets order value.

• order-first: Moves item to the start.

• order-last: Moves item to the end.

• order-none: Default order (0).

gap

gap controls the space between flex items, both rows and columns, without using margins. You can also apply for axis, which will help in giving space in both horizontal and vertical directions.

Here's an example of using it with a horizontal layout:

<div class="flex gap-8">
	<div>01<div>
	<div>02<div>
	<div>03<div>
</div>

And here's an example showing a vertical layout:

<div class="flex flex-col gap-y-5">
	<div>01<div>
	<div>02<div>
	<div>03<div>
</div>

Utility classes:

• gap-<number>: Applies space (x-axis by default) between items according to the number, as shown in the example.

• gap-[<custom-property>]: You can apply a custom gap inside square brackets, such as gap-[10px].

• gap-x-<number>: Provides horizontal spacing only.

• gap-y-<number>: Provides vertical spacing only.

Responsive Design

You can prefix the gap, column-gap, and row-gap utilities with a breakpoint variant, like lg: to only apply the utility at larger screen sizes and above. Here's an example:

<div class="flex gap-4 lg:gap-8 ...">
  <!-- ... -->
</div>

How to Justify and Align Flex Items in Tailwind

If you're building interactive components like dropdowns, menus, or toolbars using Flexbox, alignment becomes even more important when handling keyboard navigation.

For example, when using arrow keys to navigate horizontally aligned items (justify-between, justify-center, and so on), proper spacing ensures a better user experience. You can explore how Tailwind CSS keyboard navigation works with arrow keys in FlyonUI.

FlyonUI provides accessible Tailwind components that integrate smoothly with Tailwind CSS, especially helpful when building flex-based navigation layouts.

Tailwind CSS offers a wide range of utility classes for aligning and justifying flex items, which can sometimes be confusing to differentiate. Below is a concise overview of these classes, along with practical examples.

justify-content

justify-content is a flexbox property that controls how flex items are aligned along the main axis of a flex container. It decides how items are spaced inside a flex container. It is applied along with class flex.

Here's an example:

<div class="flex justify-start gap-2">
	<div>01<div>
	<div>02<div>
	<div>03<div>
</div>

Utility classes:

• justify-start: Aligns items at the start of the container.

• justify-center: Centers items along the main axis.

• justify-end: Aligns items at the end of the container.

• justify-between: Adds space between items, pushing first and last items to the edges.

• justify-around: Adds equal space around each item.

• justify-evenly: Distributes items with equal spacing everywhere, including edges.

Align Items

align-items is a flexbox property that controls how flex items are aligned along the cross-axis of a flex container.

In a row-based flex container (flex-row, which is the default direction), the cross axis is vertical. That means align-items controls vertical alignment.

In a column-based container (flex-col), the cross axis becomes horizontal, so align-items controls horizontal alignment instead.

This property is applied alongside the flex class and is commonly used to align items consistently inside navigation bars, toolbars, cards, and forms.

<div class="flex items-start gap-2">
	<div>01</div>
	<div>02</div>
	<div>03</div>
</div>

Utility classes:

• items-start: Aligns items to the start of the cross-axis (top in a row).

• items-center: Centers items vertically along the cross-axis.

• items-end: Aligns items to the end of the cross axis (bottom in a row).

• items-baseline: Aligns items based on their text baseline.

• items-stretch: Stretches items to fill the container (default behavior).

Practice Flexbox with Interactive Games

Reading documentation is important, but Flexbox really clicks when you practice it visually. One of the best ways to build strong Flexbox intuition is through interactive games that let you experiment with alignment, spacing, and direction in real time.

Here are two excellent games that will strengthen your Flexbox fundamentals and make Tailwind’s flex utilities feel second nature:

Flexbox Froggy

🔗 https://flexboxfroggy.com/

Flexbox Froggy is a fun and beginner-friendly game where you help frogs reach their lily pads using Flexbox properties. Each level introduces a new concept, like justify-content, align-items, flex-direction, and flex-wrap.

Why it’s great:

• Perfect for beginners

• Visual feedback makes concepts easy to grasp

• Covers core Flexbox properties step by step

If you’re new to Flexbox, this is one of the best places to start.

Flexbox Adventure (Coding Fantasy)

🔗 https://codingfantasy.com/games/flexboxadventure

Flexbox Adventure turns Flexbox learning into a role-playing game where you move your character by writing Flexbox rules. It focuses more on real-world layout thinking and helps reinforce how different properties work together.

Why it’s great:

• More challenging than Flexbox Froggy

• Helps solidify intermediate concepts

• Encourages problem-solving with Flexbox logic

This is a great follow-up once you’re comfortable with the basics.

Conclusion

Flexbox is a core part of modern CSS layouts, and Tailwind CSS makes it even more powerful by turning Flexbox properties into simple, readable utility classes. By understanding utilities for direction, sizing, wrapping, spacing, ordering, and alignment, you can build responsive and flexible layouts without writing custom CSS.

And by understanding how properties like flex, grow, shrink, basis, justify-*, items-*, gap, when responsive variants work together, you can build layouts that are not only flexible and responsive but also maintainable and scalable.

Instead of wrestling with custom CSS, Tailwind allows you to express layout intent directly in your markup, keeping your workflow fast and predictable.

With these Flexbox fundamentals in your toolkit, you’re well-equipped to design clean, responsive interfaces using Tailwind CSS with confidence. 🚀

Then you experiment with margin: auto;, which centers a div horizontally but doesn’t help with vertical alignment. Before long, you find yourself searching through solutions involving Flexbox, Grid, transforms, and other techniques that appear complicated and inconsistent.

The reality is that CSS does not provide a single universal property that can center everything. Instead, each layout scenario requires the right method, and understanding when to use each technique is the key to mastering CSS centering.

Table of Contents

• First: Understand the Two Types of Centering

• Method 1: Center Inline Content (text, inline elements)

• Method 2: Center a Block Horizontally

• Method 3: Perfect Center (Horizontal + Vertical) with Flexbox

• Method 4: Center Using CSS Grid (The Easiest Method Ever)

• Method 5: Center with Absolute Position + Transform

• Method 6: Vertical Center Single Line Text

• Method 7: The Table-Cell Method (Old but Useful)

• Quick Decision Guide

• Common Beginner Problems (And Fixes)

• Pro Tips You’ll Use Forever

• Summary

• The 7 Methods You Should Memorize

First: Understand the Two Types of Centering

Before diving into centering techniques, it’s important to understand the two types of centering in CSS, because different methods work along different axes. CSS layouts operate on two axes: Knowing which axis you want to center along helps you choose the right approach.

There are two axes in CSS layout:

When someone says “center this element”, they usually mean one of four things:

• Center text inside a container

• Center a block horizontally

• Center vertically

• Center both horizontally and vertically

Each requires a different solution.

Method 1: Center Inline Content (text, inline elements)

This method centers inline content such as text, links, inline images, and sometimes buttons, using the text-align: center; property. This is the simplest centering method in CSS, but it is often misunderstood because it only affects the content inside a block container, not the container itself.

Example

<div class="box">
  <h2>Hello World</h2>
  <p>This text is centered.</p>
</div>

.box {
  text-align: center;
  border: 2px solid #444;
  padding: 20px;
}

Output

Why It Works

When you apply text-align: center; to a parent element, the browser horizontally aligns all inline and inline-block children within that container. This makes it perfect for centering headings, paragraphs, navigation links, or small inline elements, but it won’t work for block-level elements like divs unless their display is changed to inline-block.

So this will NOT work:

.box {
  width: 300px;
  text-align: center; /* does NOT center the box */
}

Real-world use cases

• Center headings

• Center button labels

• Navigation menus

• Card content alignment

Beginner Mistake

Most people try to center a <div> with text-align: center;. This won’t move the div, only its contents.

Method 2: Center a Block Horizontally

This method centers a block element horizontally using margin: 0 auto;, which is one of the oldest and most reliable CSS techniques. It works by automatically distributing the available horizontal space equally on the left and right sides of the element. When you set the left and right margins to auto, the browser calculates the remaining space in the container and splits it evenly, pushing the element into the center.

Works when:

• Element has a width

• Element is block-level

Example, Center a Card

<div class="card">
  I am centered!
</div>

.card {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background: #eee;
}

Output

Why It Works

When you set the elements' margins to auto, the browser calculates the remaining horizontal space in the container after accounting for the element’s width. It then distributes this extra space equally between the left and right margins, which pushes the element into the center. This happens automatically, making margin: 0 auto; a simple and reliable way to horizontally center block elements with a fixed width.

|----auto----|---element---|----auto----|

Browser calculates: left margin = right margin. So the element sits in the middle.

Important Rule

If width is not defined, it won't work:

.card {
  margin: auto; /* won't center , takes full width */
}

Because block elements default to width: 100%;.

Real-world use cases

• Center website layout container

• Center forms

• Center blog content area

Method 3: Perfect Center (Horizontal + Vertical) with Flexbox

This method uses Flexbox to center an element both horizontally and vertically, making it one of the most reliable modern CSS solutions. When you set a container to display: flex;, you activate the Flexbox layout system, which gives you powerful alignment controls. The property justify-content: center; centers the content along the main axis (usually horizontal), while align-items: center; centers it along the cross axis (usually vertical).

Example, Center Login Box

<div class="page">
  <div class="login">
    Login Form
  </div>
</div>

.page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  padding: 40px;
  background: white;
  border: 2px solid #333;
}

Output

Why It Works

Flexbox treats the container and its children as a flexible layout system, automatically distributing space along the main and cross axes. This allows any element, regardless of its size, to sit perfectly in the middle of the container, making it ideal for centering modals, hero sections, and other dynamic content.

This Works Regardless Of:

• Unknown height

• Unknown width

• Responsive layouts

• Dynamic content

That’s why it’s widely used today.

Real-world use cases

Developers commonly use Flexbox centering to place important interface elements directly in the middle of the screen. For example, it helps center modal dialogs, loading spinners, hero section content, and other full-screen UI components. Hence, they remain visually balanced and easy for users to notice, regardless of screen size.

Method 4: Center Using CSS Grid (The Easiest Method Ever)

CSS Grid offers one of the simplest ways to center elements both horizontally and vertically. By setting a container to display: grid; and applying place-items: center;, you can position any child element perfectly in the middle with just a few lines of code. This method works because Grid provides built-in alignment controls that automatically handle positioning along both axes.

Example

<div class="wrapper">
  <div class="box">Centered!</div>
</div>

.wrapper {
  height: 100vh;
  display: grid;
  place-items: center;
}
.box {
  width: 200px;
  padding: 30px;
  text-align: center;
  background: white;
  border: 2px solid #333;
}

Output

In this example, the .wrapper acts as the grid container, and the .box element becomes a grid item. The property place-items: center; automatically aligns the box in the middle of the container, both horizontally and vertically.

100vh means 100% of the viewport height, which is the full height of the visible browser window. When you set height: 100vh; on a container, it expands to fill the entire screen from top to bottom.

Why It Works

The property place-items: center is actually shorthand for two grid alignment properties:

align-items: center;
justify-items: center;

• align-items controls vertical alignment inside the grid.

• justify-items controls horizontal alignment.

By combining both in one line, Grid centers elements in both directions automatically without needing additional layout rules.

When to Prefer Grid Over Flexbox

CSS Grid is ideal when you only need simple centering and don’t require complex layout control. It keeps your code short and easy to read.

Use Grid when:

• You only need to center a single element

• You are not building complex layouts

• You want the simplest and cleanest code

Use Flexbox when:

• You are aligning multiple items

• Layout direction matters (row vs column)

• You need spacing control between elements

Method 5: Center with Absolute Position + Transform

This centers an element using absolute positioning combined with CSS transforms, and it works even when you are not using Flexbox or Grid. In this approach, you position the element with position: absolute; and move it to the middle of its parent using top: 50%; and left: 50%;.

Example, Center Popup

<div class="container">
  <div class="popup">I'm centered</div>
</div>

.container {
  position: relative;
  height: 400px;
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Output

Why It Works

1. top: 50% moves the top edge to the middle

2. left: 50% moves the left edge to the middle

3. translate(-50%, -50%) shifts the element back by half its size

So the center becomes the element’s midpoint, not the corner.

Explanation

Without transform: The element corner sits at the center, which means this places the top-left corner of the element at the center point.

To fix that, you apply transform: translate(-50%, -50%);, which shifts the element back by half of its own width and height. This adjustment ensures the actual center of the element aligns with the center of the container. Developers often use this technique for overlays, modals, tooltips, and floating UI components.

Real-world use cases

• Modals

• Tooltips

• Floating labels

• Overlays

Method 6: Vertical Center Single Line Text

This method vertically centers single-line text inside a container by using the line-height property. When you set the line-height to the same value as the container’s height, the browser places the text in the vertical middle of that space because the line box expands to fill the container evenly.

Example, Center Text in Button

<button class="btn">Click Me</button>

.btn {
  height: 60px;
  line-height: 60px;
  text-align: center;
}

Output

Why It Works

This technique works best for elements with a fixed height, such as buttons, badges, or navigation items. However, it only works reliably when the text stays on one line, because multiple lines will break the vertical alignment.

Limitations

The main limitation of using line-height to vertically center text is that it only works for single-line text. If the text wraps onto multiple lines, the line-height no longer matches the container height for each line, causing the vertical centering to break.

This makes the method unsuitable for paragraphs, headings, or any content that can expand beyond one line, so it’s best reserved for buttons, labels, or other fixed-height, single-line elements.

Method 7: The Table-Cell Method (Old but Useful)

This method uses the table-cell technique to center content vertically and horizontally, a reliable approach for older CSS layouts and email templates. By setting a container to display: table; and its child element to display: table-cell; with vertical-align: middle; and text-align: center;, The browser treats the child like a table cell and automatically centers its content.

Example

<div class="outer">
  <div class="inner">Centered</div>
</div>

.outer {
  display: table;
  width: 100%;
  height: 300px;
}

.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Output

How It Works

• The .outer container acts as a table.

• The .inner element behaves like a table cell.

• Table cells automatically respect vertical alignment rules.

• Combining vertical-align: middle; and text-align: center; perfectly centers the content both vertically and horizontally.

Why Use This Method

• It works in older browsers that don’t fully support Flexbox or Grid.

• It’s especially useful in email templates or legacy layouts.

• No knowledge of height calculation or transforms is required.

Quick Decision Guide

Common Beginner Problems (And Fixes)

Problem 1: “margin auto not working.”

You forgot the width.

width: 300px;
margin: auto;

Problem 2: “align-items center not working.”

Parent needs height.

height: 100vh;

Problem 3: “absolute centering weird position.”

Parent missing positioning.

parent { position: relative; }

Problem 4: Flexbox vertical centering fails

Check direction:

flex-direction: column;

Now vertical/horizontal axes swap!

Pro Tips You’ll Use Forever

1. Flexbox = alignment tool

2. Grid = placement tool

3. Margin auto = layout tool

Different tools, different jobs.

Remember This Rule

• If you are centering one thing, use Grid

• If centering many things, use Flexbox

Summary

CSS centering often feels difficult because beginners expect a single magic property that works in every situation, but no such property exists. Instead, CSS provides multiple layout systems, each designed to solve specific alignment problems.

These include inline alignment for text and inline elements, flow layout for standard block elements, Flexbox for flexible row or column arrangements, Grid for two-dimensional layouts, and positioned layouts for absolute or fixed elements. Once you understand which system applies to your scenario, centering becomes predictable and much easier to implement.

The 7 Methods You Should Memorize

1. text-align: center

2. margin: 0 auto

3. Flexbox centering

4. Grid place-items: center

5. Absolute + transform

6. Line-height trick

7. Table-cell fallback

If you’ve ever struggled to center something with CSS or tried to make columns line up nicely, Flexbox simplifies this dramatically. With just a few properties, you can build modern layouts that “flex” to different screen sizes, without needing to write a bunch of custom media queries.

Developer and teacher Indra (CodeWithIndra) will walk you through every Flexbox property step by step. You’ll learn how to align items along the main and cross axis, reorder elements without changing the HTML, control how items grow and shrink, and finally understand what flex-grow, flex-shrink, and flex-basis are really doing. He also shows real examples from sites like GitHub and DataDog, then demonstrates how to recreate pieces of their layout.

The course ends with two small projects: centering an element vertically and horizontally (the thing everyone Googles at some point) and building a clean navigation bar using only Flexbox.

If you want to improve your front end development skills, this course is a good way to invest a couple hours of your weekend. [2 hour YouTube course]:

We just published a course on the freeCodeCamp.org Spanish YouTube channel that will teach you Flexbox from the fundamentals. By the end of the course, you will be able to design and implement responsive layouts.

If you have Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.

This course was created by Leosbel Poll Sotomayor. Leosbel is a software engineer with more than 10 years of experience. He started creating more than 20 years ago in Cuba, and is now living in Canada thanks to his programming skills. He created this course for the freeCodeCamp community.

Are you ready? Let's see a quick overview of Flexbox and what you will learn during the course.

What is CSS Flexbox?**

CSS Flexbox stands for CSS Flexible Box Layout. It's a layout model that allows responsive elements to be rearranged within a container based on CSS properties that define how the children should "move" to fit the size of their container.

With Flexbox, you can align, distribute, and space elements using simple properties, so you can avoid complex computations in your CSS.

During the course, you will learn how to use these properties:

• **flex-direction**
• **justify-content**
• **flex-wrap**
• **align-items**
• **align-content**
• **flex-grow**
• **flex-basis**
• **flex-shrink**

And more! You will also learn how to combine them with media queries to create even more powerful responsive layouts.

Flexbox layout. Wrapping elements automatically.

Career Opportunities

If your goal is to have a career in the field of web development, Flexbox will be super helpful for you. These skills are in high demand and widely sought by employers.

Flexbox layout. Classic design with a navigation bar, sidebar, main area, and footer.

Flexbox Course in Spanish**

Awesome. Now that you know why Flexbox is so important, let's check out the topics that you will learn during the course:

• Introduction
• What is Flexbox?
• Importance of Flexbox
• Flexbox Fundamentals
• Tools that you will use during the course
• How to set up your development environment
• Properties related to containers
• Loss of data in CSS
• Properties related to children
• Use case: Navigation Bar
• Use case: Classic Design
• Flexbox vs. Grid

If you are ready to learn Flexbox, check out the course in Spanish on the freeCodeCamp.org Spanish YouTube channel:

✍️ Course created by Leosbel Poll Sotomayor.

• YouTube: LeoDev
• Twitter: @_LeoDev
• LinkedIn: Leosbel Poll Sotomayor

In this article, you'll learn a couple of ways to vertically center your text inside such a div or other element.

How to Center Text using Line Height

This approach is limited, but can be useful if you have your element set to a fixed height using the height property.

The line-height property determines the height of the box that the browser renders text into. By default, this is set to a value slightly larger than 1 to provide comfortable spacing between lines of text.

If you set the element's height and line-height to the same value, the text will be vertically centered:

.my-element {
  height: 3rem;
  line-height: 3rem;
}

Vertically centered text using line-height

There is an important caveat to this approach, though. This only works if your text can fit on one line.

If the text does wrap, you'll see the first line vertically centered. Because you set the line-height to be the same as the element's height, the wrapped line of text now overflows the element.

Wrapped text overflowing the container

If this sounds too rigid, read on. Next, you'll see how you can use Flexbox to vertically center your text, along with any other content inside the element.

How to Center Text using Flexbox

A better, more general-purpose solution, is to use a Flexbox layout with align-items set to center.

An element using Flexbox (the flex container) lays out elements (flex items) either in a row or column. A Flexbox layout has two imaginary lines running through it. The first is the main axis, along which items will be placed. For a row flexbox, the main axis is the horizontal axis.

The cross axis runs perpendicular to the main axis. You can use the cross axis to define the vertical alignment of elements inside the flex container.

The main and cross axis in a horizontal Flexbox layout

Here's the CSS you'll need to apply a Flexbox layout and vertically center the text:

.my-element {
    /* Use a flexbox layout */
    display: flex;

    /* Make a horizontal flexbox (the default) */
    flex-direction: row;

    /* The important part: vertically center the items */
    align-items: center;
}

This creates a horizontal Flexbox layout (the flex-direction: row is not strictly required, as it's the default). The align-items property determines the alignment of items along the cross, or vertical, axis. There are a few different values you can use, but here you can use center to vertically center the text.

The text with align-items: center

This works nicely, and it even handles multiple lines of wrapped text. If you have other content inside the element, such as an image, everything will be aligned vertically.

The text is aligned vertically with other content

How to Center Text Using CSS Grid

You can also center your content vertically using CSS Grid.

For a single div containing the text to center, you can turn it into a grid layout with one row and one column.

.my-element {
    display: grid;
    align-items: center;
}

In a grid layout, the align-items property specifies the alignment of the content within the cell, along the column (vertical) axis. This vertically aligns your text within the div element.

Text vertically centered using a 1x1 grid layout

If the element containing your text is already part of a grid layout, you can either apply align-items: center to the entire grid, or if you just want to control the vertical alignment of that one grid cell, you can use align-self: center.

Conclusion

Now you know how to vertically center text. Next time you see a tweet about centering a div, you can reply with your newfound CSS knowledge!

This is a perfect resource for you if you are a beginner web developer. It'll also be useful if you're an experienced developer who wants to brush up on your responsive web design skills.

Table of Contents

• What is Flexbox?

• What are the benefits of using Flexbox?

• The main axis and the cross axis

• Flex Containers and Flex Items

• Understanding Flex and Inline-flex

• display: flex

• display: inline-flex

• The Flex Container Properties

• The flex-direction Property

• The flex-wrap Property

• The flex-flow Shorthand Property

• The justify-content Property

• The align-items Property

• The align-content Property

• The place-content Property

• The Flex Items Properties

• The order Property

• The align-self Property

• The flex-grow Property

• The flex-shrink Property

• The flex-basis Property

• The flex Shorthand Property

• Flexbox Gaps

• How to Center an Element With Flexbox

• Practice with Flexbox Games

• Are There Bugs in CSS Fexbox?

• Conclusion

What is Flexbox?

Flexbox is short for "Flexible Box Layout". It's a CSS layout model that simplifies creating complex layouts. It provides a flexible way to align elements and distribute space within a container element.

The Flexbox layout model is bidirectional. This means you can either arrange your elements in rows, columns, or both. More on that later.

What are the benefits of using Flexbox?

Before Flexbox, it was hard to create complex layouts and responsive web pages. You needed a combination of CSS floats and position properties. This required many workarounds and hacks.

But with Flexbox, you can now do the following with less difficulty and fewer lines of code:

• Align and center elements using properties like justify-content and align-items.

• Develop responsive layouts without writing lots of media queries.

• Reorder elements without changing the HTML structure

• Create same-height columns without any extra HTML elements or background images.

Now you know what Flexbox is, along with some of the things you can do with it. Let's see how you can use it.

The main axis and the cross-axis

The first thing you need to understand about Flexbox is the concept of axes. Every flex container (an element with a display property set to flex or inline-flex) has a main axis and a cross axis.

The main axis is either horizontal or vertical depending on the value of the flex-direction. No worries if you are not familiar with flex-direction. You are about to learn it.

The cross axis and main axis when the flex-direction is row

In this example, the main axis is horizontal and the cross axis is vertical.

The following is an example where the the main axis is vertical and the cross axis, is horizontal.

The main axis and cross axis when the flex-direction is column

Flex Containers and Flex Items

To use all of Flexbox's properties, you need to set the display property for an element to flex or inline-flex.

This turns the element into a flex container, and the children of that element become flex items.

Here's an example:

<section class="container">  
    <div>Flex Item 1</div>  
    <div>Flex Item 2</div>  
    <div>    
        <p>This paragraph is not a flex item</p>  
    </div>
</section>

.container {  
  display: flex;
}

The .container element is now a flex container. The three div elements are direct children of the .container element, which makes them flex items.

But the paragraph element inside the third div is not a flex item. This is because it's not a direct child of the .container element.

Understanding flex and inline-flex

You can use both flex and inline-flex to make an element a flex container. The difference is in how they interact with surrounding elements.

display: flex

This makes the flex container behave like a block-level element. The flex-container takes up the entire available width of its parent element. It starts on a new line, and the element that comes after it also starts on a new line.

Example:

<button>Button One</button>

/* Flex Container */
<section class="container">  
    <div id="red"></div>  
    <div id="gold"></div>  
    <div id="green"></div>
</section>

<button>Button Two</button>

.container {
    display: flex;
}

Flex containers behave like block elements when you use display: flex

The .container element takes up the entire available width of the body (its parent element).

display: inline-flex

This makes the flex-container behave like an inline-level element. This allows other inline elements (like buttons) to flow alongside it. Using the previous example, this is how the elements will be arranged when you change display from flex to inline-flex.

Flex containers behave like inline-elements when you use display: inline-flex

The flex container does not take up the entire width of its parent. It uses only as much horizontal space as necessary for its content.

Practice using flex and inline-flex on StackBlitz

The Flex Container Properties

The flex container properties allow you to control the layout and alignment of the flex items within a flex container.

NOTE: You apply these properties on the flex container, and not on its items.

The following are the flex container properties:

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

• place-content

The flex-direction Property

The flex-direction property defines the direction for displaying the flex items. It is what sets the flex container's main axis. This property can take any of these four values:

• row (default value)

• column

• row-reverse

• column-reverse

Now, let's look at some examples to see how it all works.

In the following code snippet, we have a names-container with four names:

<div class="names-container">  
    <p id="jill">1. JILL</p>  
    <p id="john">2. JOHN</p>  
    <p id="jane">3. JANE</p>  
    <p id="jack">4. JACK</p>
</div>

Let's see the different ways you can arrange the names using the flex-direction property.

flex-direction: row

This displays the flex-items horizontally from left to right.

.names-container {  
    display: flex;  
    flex-direction: row;  
    /* Other styles here... */
}

Example of flex-direction: row

flex-direction: column

This displays the flex-items vertically from top to bottom.

Example of flex-direction: column

flex-direction: row-reverse

This is the opposite of the row value. It displays the flex items from right to left.

Example of flex-direction: row-reverse

flex-direction: column-reverse

This is the opposite of the column value. It displays the flex items from the bottom to the top.

Example of flex-direction: column-reverse

Practice using flex-direction on StackBlitz

A note on the reverse values and accessibility:

There's something you need to keep in mind when you use row-reverse and column-reverse. As you've already seen, both affect the visual order of elements on the screen.

But the order in your HTML remains unchanged. And that is the order that screen readers and keyboard navigation controls use.

In the example, when you use row-reverse, you see Jack's name first on the screen, followed by Jane, John, and Jill.

But for someone using a screen reader, they will hear the names as they appear in the HTML and not as they appear on screen. In this case, they will first hear Jill's name, followed by John, Jane, and Jack.

The flex-wrap Property

Sometimes, the space within the flex container will not be enough for the flex items.

In such cases, you use the flex-wrap property to choose whether to let the flex-items overflow or begin on a new line.

The flex-wrap property accepts any of the following values:

• nowrap (default value)

• wrap

• wrap-reverse

To see flex-wrap in action, let's add four more names to our names-container:

<div class="names-container">  
    <p id="jill">1. JILL</p>  
    <p id="john">2. JOHN</p>  
    <p id="jane">3. JANE</p>  
    <p id="jack">4. JACK</p>  
    <p id="sara">5. SARA</p>  
    <p id="seth">6. SETH</p>  
    <p id="seal">7. SEAL</p>
</div>

flex-wrap: nowrap

This keeps all the flex items on a single line either in a row or column. It allows the flex items to overflow if there's not enough room in the flex container. See the example below:

.names-container {  
    display: flex;  
    flex-direction: row;  
    flex-wrap: nowrap;  
    /* Other styles here... */
}

Flex items overflows because flex-wrap is set to nowrap

In this example, three names overflow out of the container because there is not enough space for them.

flex-wrap: wrap

This will wrap or push the flex items to the next line if there's not enough room for them.

Flex items wrap or moves to the next line when flex-wrap is set to wrap

flex-wrap: wrap-reverse

This is the opposite of wrap. It moves the overflow items to the next line but in a reverse direction.

For example, using wrap-reverse on the names container moves overflow items to the next top line instead of the next line below.

Example of flex-wrap: wrap-reverse

Practice using flex-wrap on StackBlitz.

The flex-flow Shorthand Property

The flex-flow property is a shorthand for the flex-direction and flex-wrap properties. This means that when you use flex-flow, you can apply both properties with only a single line of code.

See the example below using the names container. You can give the container flex-direction and flex-wrap properties.

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

Or you can use the flex-flow shorthand to get the same result.

.names-container {  
    display: flex;  
    flex-flow: column wrap;
}

Example of flex-flow: column wrap

Practice using flex-flow on StackBlitz.

The justify-content Property

This justify-content property handles the alignment of flex items on the main axis of the flex container.

You can use it to take care of how space is distributed on the main axis. This property takes any of the following values:

• flex-start (default value)

• flex-end

• center

• space-between

• space-around

• space-evenly

justify-content: flex-start

This places the items at the start of the flex-direction. If the main axis is horizontal with a flex-direction of row (like the example below), it aligns the items to the left. And if it's vertical (with a flex-direction of column), it aligns the items to the top.

Using the names container example, this is how justify-content: flex-start would look like:

.names-container {  
    display: flex;  
    justify-content: flex-start;  
    /* Other styles here... */
}

Example of justify-content: flex-start

justify-content: flex-end

This will place the flex items at the end of the flex-direction of the main axis.

Example of justify-content: flex-end

justify-content: center

This places the flex items at the center of the flex container's main axis.

Example of justify-content: center

justify-content: space-between

This will place the first flex item at the start of the main axis. And also place the last item at the end of the main axis. Then space on the main axis is distributed equally among the the elements.

Example of justify-content: space-between

justify-content: space-evenly

This distributes space equally among the flex items. This means the space before and after each item is the same.

Example of justify-content: space-evenly

justify-content: space-around

This also distributes space equally between the flex items. The key difference here is that the space before the first item and after the last item is half the space between the flex items.

Example of justify-content: space-around

Practice using justify-content on StackBlitz.

The align-items Property

The align-items property handles the alignment of flex items on the cross-axis of the flex container. It can take any of the following values:

• stretch (default value)

• flex-start

• flex-end

• center

• baseline

align-items: stretch

This stretches the flex items to fill up the space within the flex-container.

See the example below using a new names container with name cards of different sizes:

.names-container {  
    display: flex;  
    align-items: stretch;  
    /* Other styles here... */
}

Example of align-items: stretch

align-items: flex-start

This will place the flex items at the start of the cross-axis of the flex container. If the cross-axis is vertical like in the example below, align-items: flex-start will place the items at the top.

.names-container {  
    display: flex;  
    align-items: flex-start;  
    /* Other styles here... */
}

Example of align-items: flex-start

align-items: flex-end

This will place the flex items at the end of the cross-axis of the flex container. If the cross-axis is vertical like in the example below, align-items: flex-end will place the items at the bottom.

.names-container {  
    display: flex;  
    align-items: flex-end;  
    /* Other styles here... */
}

Example of align-items: flex-end

align-items: center

This aligns flex items at the center of the cross-axis of the flex container.

.names-container {  
    display: flex;  
    align-items: center;  
    /* Other styles here... */
}

Example of align-items: center

align-items: baseline

When you use the baseline value, flex items are arranged such that their baselines are aligned. See the example below:

.names-container {  
    display: flex;  
    align-items: baseline;  
    /* Other styles here... */
}

The baseline is indicated with the dotted white line

Practice using align-items on StackBlitz.

The align-content Property

When you have a flex container with wrap (or more than one flex line), you may need to align the lines to distribute the space as you want. That is when you use align-content. This property can take any of the following values:

• stretch (default value)

• flex-start

• flex-end

• center

• space-between

• space-evenly

• space-around

In the example below, there are 11 names in the names container. And the names container element has a flex-wrap value of wrap. This means you can apply the align-content property to change the alignment of the flex lines.

align-content: stretch

This stretches the flex lines to fill up the space within the flex container's cross-axis.

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    align-items: stretch;  
    /* Other styles here... */
}

Example of align-content: stretch

align-content: flex-start

This places the flex lines at the start of the container's cross-axis. For example, if the cross axis is vertical like that of the names container, it will place the flex lines at the top.

Example of align-content: flex-start

align-content: flex-end

This places the flex lines at the end of the container's cross-axis.

Example of align-content: flex-end

align-content: center

This places the flex lines at the center of the container's cross-axis.

Example of align-content: center

align-content: space-between

This will place the first flex line at the start of the cross-axis. It also places the last flex line at the end of the cross axis. Then space on the cross-axis is distributed equally between the the lines.

Example of align-content: space-between

align-content: space-evenly

This distributes space equally between the flex lines. This means the space before and after each line is the same.

Example of align-content: space-evenly

align-content: space-around

This also distributes space equally between the flex lines. The key difference here is the space before the first line and after the last line is half the space between the flex lines.

Example of align-content: space-around

Practice using align-content on StackBlitz.

The place-content Property

If you need to use both the justify-content and align-content properties, you use the place-content shorthand property.

It can take one or two values. When you give it a single value, the browser will apply the same value for both justify-content and align-content.

And when you give 2 values for place-content, the first value will be for align-content and the second for justify-content.

Let's look at an example:

Instead of writing this:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    align-content: flex-end;  
    justify-content: flex-start;  
    /* Other content */
}

You can instead write the following and it will have the same effect:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    place-content: flex-end flex-start;  
    /* Other content */
}

Example of using the place-content shorthand

Practice using place-content on StackBlitz.

The Flex Item Properties

Every direct child of a flex container is a flex item. So far, you've learned the properties of the flex containers.

Flexbox also has properties that you can apply to individual flex items. They include the following:

• order

• align-self

• flex-grow

• flex-shrink

• flex-basis

• flex

The order property

The order property determines the order of appearance for the flex items.

The value you give to this property must be a number. A flex item with a lower number will appear before one with a higher number.

In the HTML code, the order for the four names is as follows:

1. Jill

2. John

3. Jane

4. Jack

<div class="names-container">
    <p id="jill">1. JILL</p>
    <p id="john">2. JOHN</p>
    <p id="jane">3. JANE</p>
    <p id="jack">4. JACK</p>
</div>

You can change the order of appearance on the screen using the order property. See the example below.

Here's how they appear with no order properties:

Name cards before add the order property

Now, see how they appear when you add the following order properties:

.names-container {  
    display: flex;
}

#jill {  
    order: 2;  
    background-color: #fe4f46;
}

#john {  
    order: 4;  
    background-color: #fcd65c;
}

#jane {  
    order: 1;  
    background-color: 
    #00bab4;
}

#jack {  
    order: 3;  
    background-color: #003f54;
}

The order property changes the order of appearance

Practice using the order property on StackBlitz.

Word of caution: Even though the order of appearance changes on screen, the order in the HTML remains unchanged. And it's the order in the HTML that screen readers use. Where possible, it's best practice to change the order in the HTML rather than doing it with Flexbox.

The align-self property

You can use the align-self property to give a flex item a different alignment from the other items.

It works the same way as the align-items property. The difference is that whereas align-items applies to all flex items, the align-self property is applied to only specific items.

Example:

.names-container {  
    display: flex;  
    align-items: center;  
    /* Other styles */    
}

#jill {
    align-self: flex-start;
}

Example of align-self with a flex-start value

In the example, the align-items property for the names container has a value of center. This aligns all the names at the center.

But using the align-self property, you are able to align Jill's name card to the top with a value of flex-start.

Practice using the align-self property on StackBlitz.

The flex-grow property

When you set a container's display to flex, often there will be some extra space after the items are arranged. See the example below:

.names-container {  
    display: flex;  
    justify-content: 
    flex-start;  
     /* Other styles */
 }

The flex container has more than enough space for the flex items

The browser treats the extra as a value of 1. This means when you give a flex-grow value of 0.5 to only one of the flex items, the browser will add half of the remaining space to the item's size.

#jill {
    flex-grow: 0.5;
}

The flex-grow property makes the Jill's larger than its initial size

And if you add a flex-grow value of 1 to only one of the flex items, the browser will add all the extra space to that item.

NOTE: If only one item in the container has a flex-grow value, then any value of 1 or more will make it take up all the extra space.

For example, the two code snippets below will have the same effect on Jill's card:

#jill {  
    flex-grow: 1;
}

#jill {  
    flex-grow: 99;
}

When only one card has a flex-grow of 1 or more

What happens when you add flex-grow values to more than one element?

The browser will share the extra space proportionately for them.

For example, when you give Jane a flex-grow of 3 and Jack a flex-grow of 1, the browser will share the extra space with a 3:1 ratio.

This means the total value of the extra space becomes 4 (3+1). Jane will then get 3/4 of the extra space. And Jack will get 1/4 of it.

The extra space is shared proportionately betwee Jane and Jack

Practice using the flex-grow property on StackBlitz.

The flex-shrink property

The flex-shrink property is the opposite of flex-grow.

You use flex-grow when you want to increase the flex item's size if there's extra space. But, you use flex-shrink when you want to decrease the flex-item's size if there's not enough space in the flex container.

See the example below:

<div class="numbers-container">
    <p id="one">1</p>
    <p id="two">2</p>
    <p id="three">3</p>
    <p id="four">4</p>
</div>

.numbers-container {  
    display: flex;  
    justify-content: flex-start;  
    /* Other styles */
}

#one {  
    flex-shrink: 2;  
    background-color: #fe4f46;
}

The first card shrinks to make room for the others

In the example, each of the four numbers has a width of 150px (that's a total of 600px). But the numbers-container has a width of 400px which is not enough.

The cards have to shrink to fit in the available space. But Number 1 which with a flex-shrink value of 2 shrinks to become twice as small as the other numbers.

What if you don't want a flex item to shrink?

To prevent a flex item from shrinking, give it a flex-shrink value of 0.

For example, when you give Number 1 a flex-shrink of 0, it will maintain the width of 150px. And the other flex items will shrink to fit in the remaining space.

The first card does not shrink because it has a flex-shrink value of 0

Practice using the flex-shrink property on StackBlitz.

The flex-basis property

You can use the flex-basis property to set the default length of a specific flex item. This is either the width or height of the item depending on the flex-direction.

If the flex-direction is row or row-reverse, the value for flex-basis becomes the initial width of the item.

And if flex-direction is column or column-reverse, then the value for flex-basis becomes the initial height of the item.

Example:

.names-container {  
    display: flex;  
    flex-direction: column;  
    /* Other styles */
}

div {  
    height: 20px;
}

#jane {  
    flex-basis: 60px;
}

Example of flex-basis setting the height of an item

In the example, the height for the divs is set at 20px. But Jane gets a flex-basis value of 60px. And that overrides the 20px given to all the divs.

Note: The flex-basis of 60px becomes the height for Jane because the flex direction is column. This means the main axis is vertical.

Here is another example. This time, the flex-direction is row. This means the flex-basis will set the width of the item.

.names-container {  
    display: flex;  
    flex-direction: row;  
    /* Other styles */
}

div {  
    width: 70px;
}

#jane {  
    flex-basis: 140px;
}

Example of flex-basis setting the width of an item

While all the other divs have a width of 70px, Jane has a width of 140px set by the flex-basis.

Practice using the flex-basis property on StackBlitz.

The flex Shorthand Property

You can use flex as a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

For example, instead of writing the following:

.flex-item {  
    flex-grow: 2;  
    flex-shrink: 0;  
    flex-basis: 50px;
}

You can use the shorthand like so and it will have the same effect:

.flex-item {  
    flex: 2 0 50px;
}

The flex property can take up to three values. The order of the values is important. The browser assigns the first value for flex-grow, the second for flex-shrink, and the third for flex-basis.

The default values for flex are 1 0 auto.

This means if you give flex a single value of 2, the browser uses 2 for flex-grow. And then it sets flex-shrink to 0 and flex-basis to auto.

Practice using the flex property on StackBlitz.

How to Center an Element With Flexbox

One of the headaches for many front-end developers is centering elements. Flexbox has a perfect solution for that.

There are two steps involved.

1. Make the parent element a flex container by setting display to flex.

2. Give a value of center to both justify-content and align-items.

That's it! Your element will be perfectly centered.

Example:

<div class="name-container">  
    <p>JOHN</p>
</div>

.name-container {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    /* Other Styles */
}

Example of centering an element with Flexbox

Whether you're trying to center text, images, or even an entire navigation bar, this will work just fine.

Flexbox Gaps

You can use the gap property to adjust the space between flex items.

NOTE: You apply the gap property on the flex container and not the flex items.

gap can take two values: the first value for gaps between the rows and the second value for gaps between the columns.

Example:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 50px 10px; 
    /* row-gap column-gap */
}

Example of giving two values for the gap property

If the gap you want between the rows and the columns is the same, you can use a single value. The browser will apply the same value to both rows and columns.

Example:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 10px; 
    /* Other Styles */
}

Example of using only one value for both rows and columns gap

You can also use the properties row-gap if you need to apply a specific gap value between only the rows. and column-gap if you need to add gaps between only the columns.

Example: Adding gaps between only the rows:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    row-gap: 20px; 
    /* Other Styles */
}

Example of using row-gap

Example: Adding gaps between only the columns:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    column-gap: 20px; 
    /* Other Styles */
}

Example of using column-gap

Practice using the gap property on StackBlitz.

Practice with Flexbox Games

Want to practice Flexbox in an interactive way? Check out the following games. They provide a hands-on experience for practicing Flexbox in a fun and engaging way.

• Flexbox Froggy

• Flexbox Defense

• Flexbox Zombies

Are There Bugs in CSS Flexbox?

While CSS Flexbox is a powerful layout tool, it's got a few bugs that may surprise you.

A common example is that some HTML elements cannot act as flex containers. These include the <button>, <fieldset>, and <summary> elements.

The workaround is to use an element like a div to wrap around the element's children. Then use Flexbox on the wrapper div.

If you are curious about other Flexbox bugs and workarounds, you can have a look at the Flexbugs repository on GitHub.

Conclusion

In this guide, you learned all the Flexbox properties, their values, and how to use them to create responsive layouts. You also learned about some games like Flexbox Froggy you can use for practice.

Thank you for reading, and happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.

This tutorial discusses everything you need to know to use Flexbox like a pro.

Table of Contents

1. What Is Flexbox?
2. Flex Container vs. Flex Item: What's the Difference?
3. What Is a flex Value in CSS?
4. What Is an inline-flex Value in CSS?
5. Properties for Specifying Flexbox's Layout
6. What Are the Flexible Containers Properties?
7. What Is Flexbox's flex-direction Property?
8. What Is Flexbox's flex-wrap Property?
9. What Is Flexbox's flex-flow Property?
10. What Is Flexbox's justify-content Property?
11. What Is Flexbox's align-items Property?
12. What Is Flexbox's align-content Property?
13. What Are the Flexible Items Properties?
14. What Is Flexbox's align-self Property?
15. What Is Flexbox's order Property?
16. What Is Flexbox's flex-grow Property?
17. What Is Flexbox's flex-shrink Property?
18. What Is Flexbox's flex-basis Property?
19. What Is Flexbox's flex Property?
20. How to Center Elements Horizontally with Flexbox
21. How to Center Elements Vertically with Flexbox
22. How to Center Elements Horizontally and Vertically with Flexbox
23. Overview

So, without any further ado, let's understand what Flexbox is.

What Is Flexbox?

Flexbox makes browsers display selected HTML elements as flexible box models.

Flexbox allows easy resizing and repositioning of a flexible container and its items one-dimensionally.

Note:

• "One-dimensionally" means Flexbox allows laying out box models in a row or column at a time. In other words, Flexbox cannot lay out box models in a row and column at the same time.
• Flexbox is sometimes called a flexible box layout module.
• Use the grid layout module if you need to resize and reposition elements two-dimensionally.

Flex Container vs. Flex Item: What's the Difference?

A flex container is an HTML element whose display property's value is flex or inline-flex.

Flex items are the direct children of a flex container.

A flex container (the large yellow area in the image) is an HTML element whose display property's value is flex or inline-flex. Flex items (the smaller boxes within the yellow container) are the direct children of a flex container.

What Is a flex Value in CSS?

flex tells browsers to display the selected HTML element as a block-level flexible box model.

In other words, setting an element's display property's value to flex turns the box model into a block-level flexbox.

Here's an example:

section {
  display: flex;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the flex value to convert the HTML document's <section> elements from regular <section> nodes to block-level flexible box models.

Note:

• Converting an HTML node to a flexible box model makes the element's direct children become flexible items.
• The display: flex directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Let's now discuss inline-flex.

What Is an inline-flex Value in CSS?

inline-flex tells browsers to display the selected HTML element as an inline-level flexible box model.

In other words, setting an element's display property's value to inline-flex turns the box model into an inline-level flexbox.

Here's an example:

section {
  display: inline-flex;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the inline-flex value to convert the HTML document's <section> elements from regular <section> nodes to inline-level flexible box models.

Note:

• Converting an HTML node to a flexible box model makes the element's direct children become flexible items.
• The display: inline-flex directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Properties for Specifying Flexbox's Layout

On converting a regular HTML element to a flex (or inline-flex) box model, Flexbox provides two categories of properties for positioning the flexible box and its direct children:

• Flexible containers properties
• Flexible items properties

What Are the Flexible Containers Properties?

A flexible container's properties specify how browsers should layout items within the flexible box model.

Note: We define a flexible container's property on the flex container, not its items.

The six (6) types of flex container properties are:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Let's discuss the six types now.

What Is Flexbox's flex-direction Property?

flex-direction tells browsers the specific direction (row or column) they should lay out a flexible container's direct children.

In other words, flex-direction defines a flexbox's main axis.

A Flexbox's main axis is the layout orientation defined by a flex-direction property. Its cross axis is the perpendicular orientation to the main axis.

Here's an example:

section {
  display: flex;
  flex-direction: column;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above organized the flexible <section> containers' items in the column direction of your browser's default language.

Tip: Use flex-direction: column-reverse (or flex-direction: row-reverse) to reverse the browser's layout direction.

What Is Flexbox's flex-wrap Property?

flex-wrap specifies whether browsers should wrap overflown flexible items onto multiple lines.

The flex-wrap property accepts the following values:

• nowrap
• wrap
• wrap-reverse

Let's discuss the three values.

What is flex-wrap: nowrap in CSS flexbox?

nowrap is flex-wrap's default value. It forces all items within a flexible container into a single line (that is, row-wise or column-wise direction).

In other words, nowrap tells browsers not to wrap a flexible container's items.

Note: Suppose the total width (or height) of all the items in a flexible container is greater than the flexbox's width (or height). In such a case, nowrap will cause the elements to overflow out of the container.

Here's an example:

section {
  width: 130px;
  display: flex;
  flex-wrap: nowrap;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used nowrap to force browsers to lay out the flexible containers' items in a single line.

What is flex-wrap: wrap in CSS flexbox?

wrap moves all overflow items within a flexible container to the next line.

In other words, wrap tells browsers to wrap a flexible container's overflow items.

Here's an example:

section {
  width: 130px;
  display: flex;
  flex-wrap: wrap;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used wrap to wrap the flexible containers' overflow items to the next line.

What is flex-wrap: wrap-reverse in CSS flexbox?

wrap-reverse moves all overflow items within a flexible container to the next line in reverse order.

Note: wrap-reverse does the same thing as wrap—but in reverse order.

Here's an example:

section {
  width: 130px;
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

We used wrap-reverse to wrap the flexible containers' overflow items to the next line in reverse order.

What Is Flexbox's flex-flow Property?

flex-flow is a shorthand for the flex-direction and flex-wrap properties.

In other words, instead of writing:

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

You can alternatively use the flex-flow property to shorten your code like so:

section {
  display: flex;
  flex-flow: column wrap;
}

What Is Flexbox's justify-content Property?

justify-content specifies how browsers should position a flexible container's items along the flexbox's main axis.

The justify-content property accepts the following values:

• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

Let's discuss these six values.

What is justify-content: flex-start in CSS Flexbox?

flex-start is justify-content's default value. It aligns a flexible container's items with the main-start edge of the flexbox's main axis.

flex-start aligns a flexible container's items with the main-start side of the flexbox's main axis.

Here's an example:

section {
  display: flex;
  justify-content: flex-start;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the flex-start value to align the flexible container's items to the flexbox's main-start edge.

What is justify-content: center in CSS Flexbox?

center aligns a flexible container's items to the center of the flexbox's main axis.

center aligns a flexible container's items to the center of the flexbox's main axis.

Here's an example:

section {
  display: flex;
  justify-content: center;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

We used the center value to align the flexible container's items to the center of the flexbox.

What is justify-content: flex-end in CSS Flexbox?

flex-end aligns a flexible container's items with the main-end side of the flexbox's main axis.

flex-end aligns a flexible container's items with the main-end side of the flexbox's main axis.

Here's an example:

section {
  display: flex;
  justify-content: flex-end;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

We used the flex-end value to align the flexible container's items to the flexbox's main-end side.

What is justify-content: space-between in CSS Flexbox?

space-between does the following:

• It aligns a flexible container's first item with the main-start edge of the flexbox's main axis.
• It aligns the container's last item with the main-end edge of the flexbox's main axis.
• It creates even spacing between each pair of items between the first and last item.

space-between creates even spacing between each pair of items between the first and last item.

Here's an example:

section {
  display: flex;
  justify-content: space-between;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-between value to create even spacing between each pair of items between the first and last flex item.

What is justify-content: space-around in CSS Flexbox?

space-around assigns equal spacing to each side of a flexible container's items.

Therefore, the space before the first item and after the last element is half the width of the space between each pair of elements.

space-around assigns equal spacing to each side of a flexible container's items.

Here's an example:

section {
  display: flex;
  justify-content: space-around;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the flexible container's items.

What is justify-content: space-evenly in CSS Flexbox?

space-evenly assigns even spacing to both ends of a flexible container and between its items.

space-evenly assigns even spacing to both ends of a flexible container and between its items.

Here's an example:

section {
  display: flex;
  justify-content: space-evenly;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the flexbox and between its items.

Let's now discuss the fifth type of flexible container property.

What Is Flexbox's align-items Property?

align-items specifies how browsers should position a flexible container's items along the cross-axis of the flexbox.

The align-items property accepts the following values:

• stretch
• flex-start
• center
• flex-end
• baseline

Let's discuss the five values.

What is align-items: stretch in CSS Flexbox?

stretch is align-items' default value. It stretches a flexible container's items to fill the flexbox's cross-axis.

stretch stretches a flexible container's items to fill the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  align-items: stretch;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch the flexible items to fill the <section>'s cross-axis.

What is align-items: flex-start in CSS Flexbox?

flex-start aligns a flexible container's items with the cross-start edge of the flexbox's cross-axis.

flex-start aligns a flexible container's items with the cross-start edge of the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  align-items: flex-start;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

We used the flex-start value to align the flexible items to the cross-start edge of the <section>'s cross-axis.

What is align-items: center in CSS Flexbox?

center aligns a flexible container's items to the center of the flexbox's cross-axis.

center aligns a flexible container's items to the center of the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  align-items: center;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the center value to align the flexible items to the center of the <section>'s cross-axis.

What is align-items: flex-end in CSS Flexbox?

flex-end aligns a flexible container's items with the cross-end edge of the flexbox's cross-axis.

flex-end aligns a flexible container's items with the cross-end edge of the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  align-items: flex-end;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

We used the flex-end value to align the flexible items to the cross-end edge of the <section>'s cross-axis.

What is align-items: baseline in CSS Flexbox?

baseline aligns a flexible container's items with the baseline of the flexbox's cross-axis.

baseline aligns a flexible container's items with the baseline of the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  align-items: baseline;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the baseline value to align the flexible items to the <section>'s baseline.

Now, let's talk about the sixth CSS flexible container property type.

What Is Flexbox's align-content Property?

align-content specifies how browsers should position a flexible container's lines along the flexbox's cross-axis.

Note: The align-content property does not affect a flexbox with only one line—for instance, a flexible container with flex-wrap: nowrap. In other words, align-content works only on flexboxes with multiple lines.

The align-content property accepts the following values:

• stretch
• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

Let's discuss the seven values.

What is align-content: stretch in CSS Flexbox?

stretch is align-content's default value. It stretches the flexible container's lines to fill the flexbox's cross-axis.

stretch stretches the flexible container's lines to fill the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch the flexbox's lines to fill the <section>'s cross-axis.

What is align-content: flex-start in CSS Flexbox?

flex-start aligns a flexible container's lines with the cross-start edge of the flexbox's cross-axis.

flex-start aligns a flexible container's lines with the cross-start edge of the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

The snippet above used the flex-start value to align the flexbox's lines to the cross-start edge of the <section>'s cross-axis.

What is align-content: center in CSS Flexbox?

center aligns a flexible container's lines to the center of the flexbox's cross-axis.

center aligns a flexible container's lines to the center of the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

We used the center value to align the flexbox's lines to the center of the <section>'s cross-axis.

What is align-content: flex-end in CSS Flexbox?

flex-end aligns a flexible container's lines with the cross-end edge of the flexbox's cross-axis.

flex-end aligns a flexible container's lines with the cross-end edge of the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

We used the flex-end value to align the flexbox's lines to the cross-end edge of the <section>'s cross-axis.

What is align-content: space-between in CSS Flexbox?

space-between does the following:

• It aligns the flexbox's first line with the main-start edge of the flexible container's main axis.
• It aligns the flexbox's last line with the main-end side of the flexible container's main axis.
• It creates equal spacing between each pair of lines between the first and last line.

space-between creates equal spacing between each pair of lines between the first and last line

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

The snippet above used the space-between value to create equal spacing between each pair of lines between the first and last line.

What is align-content: space-around in CSS Flexbox?

space-around assigns equal spacing to each side of a flexible container's lines.

Therefore, the space before the first line and after the last one is half the width of the space between each pair of lines.

space-around assigns equal spacing to each side of a flexible container's lines.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the flexible container's lines.

What is align-content: space-evenly in CSS Flexbox?

space-evenly assigns even spacing to both ends of a flexible container and between its lines.

space-evenly assigns even spacing to both ends of a flexible container and between its lines.

Here's an example:

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the flexbox and between its lines.

So, now that we know the types of CSS flexible container properties, we can discuss the flex item properties.

What Are the Flexible Item's Properties?

A flexible item's properties specify how browsers should layout a specified item within the flexible box model.

Note: We define a flexible item's property on the flex item, not its container.

The six (6) types of flex item properties are:

• align-self
• order
• flex-grow
• flex-shrink
• flex-basis
• flex

Let's discuss the six types now.

What Is Flexbox's align-self Property?

align-self specifies how browsers should position selected flexible items along the flexbox's cross-axis.

Note:

• align-self affects only the selected flexible item—not all the flexbox's items.
• align-self overrides the align-items property.

The align-self property accepts the following values:

• stretch
• flex-start
• center
• flex-end
• baseline

Let's discuss the five values.

What is align-self: stretch in CSS Flexbox?

stretch stretches the selected flexible items to fill the flexbox's cross-axis.

stretch stretches the selected flexible item(s) to fill the flexbox's cross-axis.

Here's an example:

.flex-item2 {
  align-self: stretch;
}

Try it on StackBlitz

We used the stretch value to stretch flex-item2 to fill its container's cross-axis.

What is align-self: flex-start in CSS Flexbox?

flex-start aligns the selected flexible items with the cross-start edge of the flexbox's cross-axis.

flex-start aligns the selected flexible item(s) with the cross-start edge of the flexbox's cross-axis.

Here's an example:

.flex-item2 {
  align-self: flex-start;
}

Try it on StackBlitz

The snippet above used the flex-start value to align flex-item2 to the cross-start edge of its container's cross-axis.

What is align-self: center in CSS Flexbox?

center aligns the selected flexible items to the center of the flexbox's cross-axis.

center aligns the selected flexible item(s) to the center of the flexbox's cross-axis.

Here's an example:

.flex-item2 {
  align-self: center;
}

Try it on StackBlitz

The snippet above used the center value to align flex-item2 to the center of its container's cross-axis.

What is align-self: flex-end in CSS Flexbox?

flex-end aligns the selected flexible items with the cross-end edge of the flexbox's cross-axis.

flex-end aligns the selected flexible item(s) with the cross-end edge of the flexbox's cross-axis.

Here's an example:

.flex-item2 {
  align-self: flex-end;
}

Try it on StackBlitz

The snippet above used the flex-end value to align flex-item2 to the cross-end edge of its container's cross-axis.

What is align-self: baseline in CSS Flexbox?

baseline aligns the selected flexible items with the baseline of the flexbox's cross-axis.

Here's an example:

.flex-item2 {
  font-size: 3rem;
  align-self: baseline;
}

Try it on StackBlitz

We used the baseline value to align flex-item2 to its container's baseline.

Let's now discuss the second type of flexible item property.

What Is Flexbox's order Property?

order changes a flexible item's default order (arrangement).

In other words, order allows you to reposition a flexbox's item without altering your HTML code's layout.

Here's an example:

<ul style="display: flex; flex-direction: column">
  <li style="order: 6">1</li>
  <li style="order: 4">2</li>
  <li style="order: 1">3</li>
  <li style="order: 7">4</li>
  <li style="order: 2">5</li>
  <li style="order: 5">6</li>
  <li style="order: 3">7</li>
</ul>

Try it on StackBlitz

The HTML snippet above used the order property to change the unordered list's arrangement.

So, instead of the following order:

• 1
• 2
• 3
• 4
• 5
• 6
• 7

The browser will display this:

• 3
• 5
• 7
• 2
• 6
• 1
• 4

Use the order property with caution, as it prevents screen readers from accessing the correct reading order of an HTML document. Only use it if it is super important to use CSS to change the HTML code's layout.

But in most cases, it is best to rearrange the HTML code directly rather than using CSS.

Note: The style="value" syntax, in the HTML snippet above, is the inline CSS technique for styling HTML elements.

What Is Flexbox's flex-grow Property?

flex-grow tells browsers how much of the flexbox's left-over space they should add to the selected flexible item's size.

Note: A left-over space refers to the space remaining after browsers have deducted the sum of all flexible items' sizes from the flexbox's size.

Here's an example:

.flex-item3 {
  flex-grow: 0.5;
}

<section>
  <div class="flex-item1">1</div>
  <div class="flex-item2">2</div>
  <div class="flex-item3">3</div>
  <div class="flex-item4">4</div>
</section>

Try it on StackBlitz

We used the flex-grow property to make browsers add half of <section>'s left-over space to flex-item3's size.

Note: flex-grow's default value is 0.

What Is Flexbox's flex-shrink Property?

flex-shrink tells browsers how much the specified flexible item should shrink when the sum of all items' sizes exceeds the flexbox's size.

In other words, suppose the flexbox's size is insufficient to fit the flexible items. In that case, browsers will shrink the items to fit the container.

Therefore, flex-shrink allows you to specify the shrinking factor of a flexible item.

Here's an example:

.flex-item3 {
  flex-shrink: 0;
}

Try it on StackBlitz

We used the flex-shrink property to prevent browsers from shrinking flex-item3.

Note:

• Browsers will not shrink flexible items with a flex-shrink value of 0.
• flex-shrink's default value is 1.

What Is Flexbox's flex-basis Property?

flex-basis sets the initial length of a flexible item.

Here's an example:

.flex-item3 {
  flex-basis: 100px;
}

Try it on StackBlitz

We used the flex-basis property to set flex-item3's initial length to 100px.

Note the following:

• auto is flex-basis' default value.
• A flex-basis' value (other than auto) has higher specificity than width (or height). Therefore, suppose you define both for a flexible item. In that case, browsers will use flex-basis.
• The flex-basis property sets the content box's initial width. But you can use the box-sizing property to make it set the border box's width instead.

What Is Flexbox's flex Property?

flex is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

In other words, instead of writing:

.flex-item3 {
  flex-grow: 0.5;
  flex-shrink: 0;
  flex-basis: 100px;
}

You can alternatively use the flex property to shorten your code like so:

.flex-item3 {
  flex: 0.5 0 100px;
}

Note the following:

• flex: auto is equivalent to flex: 1 1 auto.
• flex: none is equivalent to flex: 0 0 auto.
• flex: initial sets the flex property to its default value. It is equivalent to flex: 0 1 auto.
• flex: inherit inherits its parent element's flex property's values.

So, now that we know the flexbox properties developers use to layout flexible boxes and their direct children, we can discuss how to center elements with flexbox.

How to Center Elements Horizontally with Flexbox

You can center any element horizontally within its container by:

• Setting its container's display property to flex
• Setting the flexible container's justify-content property to center

Here's an example:

section {
  display: flex;
  justify-content: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

Try it on StackBlitz

How to Center Elements Vertically with Flexbox

You can center any element vertically within its container by:

• Setting its container's display property to flex
• Setting the flexible container's align-items property to center

Here's an example:

section {
  display: flex;
  align-items: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

Try it on StackBlitz

How to Center Elements Horizontally and Vertically with Flexbox

You can center any HTML element horizontally and vertically within its container by:

• Setting its container's display property to flex
• Setting the flexible container's justify-content and align-items properties to center

Here's an example:

section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

Try it on StackBlitz

Overview

In this article, we discussed all the Flexbox tools you need to create basic and advanced website layouts in flexible and responsive ways.

Thanks for reading!

If you like the images I used in this tutorial, you can get them all in this booklet.

And here's a useful ReactJS resource:

I wrote a book about React!

• It's beginner friendly ✔
• It has live code snippets ✔
• It contains scalable projects ✔
• It has plenty of easy-to-grasp examples ✔

The React Explained Clearly book is all you need to understand ReactJS.

The first thing to do when you have a website or application to build or design is to decide on the layout. This is important because it is within this layout that you specify how elements are arranged so that you can assess them in their intended manner and hierarchy.

Basically, the aim of every web layout is to reduce confusion, enhance usability and to ultimately give your users an enjoyable experience. Some of the main elements of a layout are navigation, menus and content.

In web and front-end development, having a layout in mind ahead of building can help you decide on what CSS layout module to use: Flexbox or Grid.

In this article, we’re going to learn what each of these tools are and the best way to use them by building a simple yet beautiful landing page.

What We're Going To Build

landing page design

Check it out on Codepen here.

Project Functionality

1. Web Layout: Create a beautiful landing page
2. Mobile Responsiveness

Prerequisites

• Basic knowledge of HTML and CSS.
• An IDE (text editor) like VS Code
• A web browser

Setup

1. Create a folder for your project and open in an IDE.
2. Within your project folder, create index.html and style.css files.
3. Create an asset folder to store images.
4. Within your index.html file, create your HTML boilerplate and link your CSS file and font URL within the <head> tag.

Resources

1. Font: https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&family=Poppins:wght@400;500;700&display=swap
2. Desktop Image: https://i.postimg.cc/0Nt97Bhf/image-hero-desktop.png
3. Mobile Image: https://i.postimg.cc/ZnYfhwwW/image-hero-mobile.png
4. Client Logo (Databiz): https://i.postimg.cc/gJ9Y84m6/client-databiz.png
5. Client Logo (Audiophile): https://i.postimg.cc/15DDqYSD/client-audiophile.png
6. Client Logo (Meet): https://i.postimg.cc/5ybQqfbv/client-meet.png
7. Client Logo (Maker): https://i.postimg.cc/g2NsxByN/client-maker.png

How to Use Flexbox

Generally, HTML elements align according to their default display style. This means, without external styling with CSS, block elements like p and div will start on a new line. Inline elements like input and span, on the other hand, are arranged next to each other on the same line.

However, the concept of Flexbox allows you to easily place these elements either horizontally or vertically in what’s often referred to as one dimension. In order to achieve this, at least two elements are required: flex container and flex item. These refer to a parent and child element, respectively.

In responsive design, the purpose of Flexbox is to allow containers and their child elements to fill defined spaces or shrink depending on a device’s dimensions.

Flex-direction and Axes

Flex-direction is an important property of CSS Flexbox, because it is what determines the direction that flex items are arranged in. It does this by pointing out the main axis of a flex container.

There are two main axes, namely main axis and cross axis. The main axis is the defined direction of how your flex items are placed in the flex container, whilst the cross axis is always the axis at the opposite side of the main axis.

It can be dangerous to try using the concept of x and y axis from math to understand this. This is mainly because in Flexbox the main axis can be vertical or horizontal, always depending on the value of the flex-direction.

The values accepted by the flex-direction property include row (which is default), row-reverse, column, and column-reverse. For the purposes of this project, we’re going to look at row and column.

flex-direction: row

When the flex-direction attribute has a value of row, the main axis is horizontal and the cross axis is vertical, as shown in the image above. This means flex items will be arranged horizontally.

Since the row is the default value, if you display a container as flex but don't specify the flex-direction, the flex items will automatically be in a row.

flex-direction: column

When the flex-direction attribute has a value of column, the main axis is vertical and the cross axis is horizontal, as shown in the image above. This means flex items will be arranged vertically.

How to Build the Navbar

Now that we know how Flexbox works, let’s start building our navbar. We'll first provide the content within it, that is the menu items and logo. We’ll give them descriptive classes so that we can easily reference them within our CSS file.

<nav>
      <h2 class="logo">snap</h2>
      <ul class="menu-items">
        <li>Features</li>
        <li>Company</li>
        <li>Careers</li>
        <li>About</li>
      </ul>
      <ul class="cta-btns">
        <li>Login</li>
        <li>Register</li>
      </ul>
</nav>

The image below is the output for the code above. Because both <ul> and <li> are block elements, each of the items we specified within them will be displayed on a new line.

Navbar content output

Flexbox layout display is declared on parent containers and affects child elements. This means that if you had a list of groceries in an unordered list, display flex can’t be applied on the <li>s which are child elements in this case. Instead, to display them as flex, you’d first have to create a parent container and apply it to that.

In our CSS code below, we're defining the font style and size for our project as well as our navbar logo. We're also displaying our nav elements and some of the elements within those as flex.

* {
  font-family: "Epilogue", sans-serif;
  font-size: 0.85rem;
}

.logo {
  font-size: 1.3rem;
}

nav,
.cta-btns,
.menu-items {
  display: flex;
}

The image below is the output for the code above. The elements have been displayed as flex. Yet because we didn't specify the flex-direction, they're automatically arranged in a row.

But as you can see below using the ruler (red line), the flex items are not aligned as they should be. Let's fix that by learning another important flex element.

Flex without alignment

How to use the align-items attribute

This is a Flexbox attribute that controls the arrangement of flex items on the cross axis. The values it takes are flex-start, flex-end and center depending on the element's alignment needs. The image below shows how each of them works.

Image credit: freeCodeCamp

From the image above, we can see that if we want to ensure that the flex items within our <nav> are aligned properly, on that element we must give the align-items attribute a value of center. So we have to add an attribute of align-items and a value of center to our flex container as shown in the CSS code below:

nav,
.cta-btns,
.menu-items {
  display: flex;
  align-items: center;
}

As you can see in the image below, the flex items are now aligned as they should be.

Flex with center alignment

But once again there is something missing. We want to have our items spread out properly on the navbar: the logo on the extreme left, login and register at the extreme right, and the rest in the middle.

We can achieve this with the justify-content attribute. Let's learn about it next and then implement it.

How to use the justify-content attribute

This is a Flexbox attribute that controls the arrangement of flex items on the main axis. It also defines how browsers distribute space between and around flex items within a flex container.

To achieve responsiveness, it helps with allocating any excess space that is leftover after flex-items have been arranged.

justify-content styles

From the styles associated with the various values of the justify-content attribute, we can see that the bottom two are more similar to what we're trying to achieve.

We can either go for the space around or the space-between and provide some padding on the sides to push the items on the extreme ends from the edges. We also give the list-syle attribute a value of none to remove the dots in front of the list items.

li {
  list-style: none;
}

nav {
  justify-content: space-between;
}

justify-content navbar output

Now that we have the items placed at their desired positions, we need to create slight spaces between them. In this case, we're going to give each list item a margin-right of 1rem. We also set other styles like size of fonts, color and a border for the register item.

nav {
  margin: 0 1.5rem 1.5rem 1.5rem;
  justify-content: space-between;
}

.logos-section {
  display: flex;
}

.menu-items li,
.cta-btns li {
  font-size: 0.7rem;
  margin-right: 1rem;
  color: hsl(0, 0%, 41%);
}

.cta-btns li:nth-last-child(1) {
  border: 1px solid gray;
  padding: 0.2rem 0.7rem;
  border-radius: 0.3rem;
}

Navbar with styles

After implementing the above code, this is the final look of our navbar. And this marks the end of our Flexbox section. Next, we'll build the final part of our landing page with CSS Grid.

How to Use CSS Grid

CSS Grid is a life-changing tool for creating web layouts. It helps you make both simple and complex layouts. The main difference is that while Flexbox helps with one dimensional arrangement of elements, CSS grid is able to do two dimensional arrangements.

The concept of axes we learnt about under Flexbox still applies here. You can use CSS Grid to arrange elements on the main axis and cross axis at the same time.

In summary, Flexbox, allows you to either arrange elements horizontally (in a row) or vertically (in a column). But with CSS Grid you can align elements both vertically and horizontally.

The CSS Grid layout is declared only on parent elements or containers. In effect, all its children become grid items. Once you have the target container, you give it an attribute of display and value of grid. The size of a grid’s row and column can be determined with grid-template-rows and grid-template-columns, respectively.

How to Build the Homepage

Just like we did with the navbar, let's start by defining our content within a <main> section in our HTML file.

Looking at our target image, we have two main sections: the left section will have text and logos whilst the right section has a hero image. That’s for the web view of our project.

Let's start by defining our content. The section with class text-side contains: heading, paragraph text, button and logo. The section with class img-side only contains an image.

<main>
      <section id="text-side">
        <h1>Make <br />remote work</h1>
        <p>
          Get your team in sync, no matter your location. Streamline processes,
          create team rituals, and watch productivity soar.
        </p>
        <button>Learn more</button>
        <div class="clients-logos">
          <img src="./assets/images/client-databiz.svg" />
          <img src="./assets/images/client-audiophile.svg" />
          <img src="./assets/images/client-meet.svg" />
          <img src="./assets/images/client-maker.svg" />
        </div>
      </section>
      <section class="img-side">
        <img src="./assets/images/image-hero-desktop.png" />
      </section>
    </main>

Within the main section, we created the two sections we needed and gave them descriptive id's: text-side and img-side.

Within the text-side, we added a heading, paragraph text, button and a div to display clients' logos. The only thing we need for the img-side is the display image.

/* Client Logos */
.clients-logos img {
  width: 5rem;
  margin-right: 1rem;
}

.clients-logos {
  margin-top: 4rem;
}

.clients-logos img:nth-child(2) {
  width: 3rem;
}

/* Main */
main h1 {
  font-size: 3rem;
}

main p {
  font-size: 0.7rem;
  width: 18rem;
  color: hsl(0, 0%, 41%);
  line-height: 0.9rem;
}

main button {
  background-color: hsl(0, 0%, 8%);
  color: #fff;
  border: none;
  font-size: 0.7rem;
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  margin-top: 1rem;
}

#text-side {
  margin-top: 3rem;
}
/* Hero Image */
.img-side img {
  width: 20rem;
}

Within our CSS file, we need to style the client logos div as well as the child elements. We also set a font-size for the heading and paragraph. Next, we style our button and assign a width to our image.

pre-grid homepage display

The image above shows how our web page will look after defining the content and styling just the heading, button and logos – that is, we haven't declared our container as a grid yet. Because almost all the elements we have here are block elements, we see them align on top of one another.

Grid Template Rows and Columns

The grid-template-columns property specifies the number and widths of columns in a grid, defining a grid container's column by specifying the size of its tracks and line names.

The grid-template-rows property is the direct opposite. It specifies the number and heights of rows in a grid, also defining a grid container's row by specifying the size of its tracks and line names.

As you can see in the image below, grid-template-rows arranges elements from the top to bottom of the device screen. grid-template-columns arranges elements from the left to right side of the device screen.

For our project, we're going to make use of grid-template-columns since we want to arrange our two sections side by side, letting each section occupy an equal part of the overall project width. We do this by assigning it as an attribute on the same container that we specified a display of grid on.

display: grid

Now that the two sections inside our <main> tag have been placed equally using the grid-template-columns, we have two last things to do.

We need to align them horizontally, by positioning both elements in the center of the page, with the extra space on the left of the image, evenly distributed on both sides. We also need to align them vertically by positioning both of them in the center of the page, with the extra space on the bottom, evenly distributed above and beneath.

Align and Justify in CSS Grid

Good news – we don't have to learn any new concepts to achieve our desired alignments in CSS Grid Layouts. Because fortunately, align-items and justify-content, as we learnt earlier, are not exclusive to Flebox. You can also use them to position items both horizontally and vertically.

main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 70vh;
  align-items: center;
  justify-content: center;
  margin-left: 8rem;
}

As you can see in the code above, we only had to give the value of center to both align-items and justify-content attributes on the parent tag (grid container).

To ensure that we see the effect of position in the perfect center, we also had to specify a height for the section. The image below is the final output of our project.

Landing page final look

How to Make it Responsive

So far, everything we've built is for the web. But for the sake of users who want to access the landing page on mobile, we have to make our project accessible on smaller screens. In our case, we're looking at screens that are greater than 300px but less than 480px.

As you can see in the code below, we're hiding our nav items and displaying an emoji with class of mobile-nav. Beside that, we're hiding the desktop header image and showing the mobile header image.

/* Responsive */
@media (min-width: 300px) and (max-width: 480px) {
  * {
    font-size: 1rem;
  }

  body {
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  nav {
    margin: 0 1.5rem 0 1.5rem;
  }

  nav ul {
    display: none;
  }

  .mobile-nav {
    display: block;
    margin-right: 2rem;
  }

  main {
    display: grid;
    grid-template-columns: 100%;
    margin: 0 auto;
  }

  /* Clients logos */
  .clients-logos {
    margin-top: 2rem;
  }

  .desktop-logos {
    display: none;
  }

  .mobile-logos {
    display: block;
  }

  /* Images */
  .desktop-img {
    display: none;
  }
  .mobile-img {
    display: block;
    margin-top: 3rem;
  }

  .cta-btns,
  .menu-items {
    display: none;
  }

  main h1 {
    font-size: 2.5rem;
  }

  /* Client Logos */
  .clients-logos img {
    width: 4.5rem;
    margin-right: 0.8rem;
  }

  .attribution {
    width: 13rem;
    margin: 8rem auto 0 auto;
    text-align: center;
  }
}

Full Project Code

This is the project we’ve built together in this article:

Here's the full HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&family=Poppins:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <title>Web Layout | Landing Page</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  </head>
  <body>
    <nav>
      <div class="logos-section">
        <h2 class="logo">snap</h2>
        <ul class="menu-items">
          <li>
            Features<svg
              width="10"
              height="6"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke="#686868"
                stroke-width="1.5"
                fill="none"
                d="m1 1 4 4 4-4"
              />
            </svg>
          </li>
          <li>
            Company<svg
              width="10"
              height="6"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke="#686868"
                stroke-width="1.5"
                fill="none"
                d="m1 1 4 4 4-4"
              />
            </svg>
          </li>
          <li>Careers</li>
          <li>About</li>
        </ul>
      </div>
      <ul class="cta-btns">
        <li>Login</li>
        <li>Register</li>
      </ul>
      <p class="mobile-nav">🌚</p>
    </nav>
    <main>
      <section id="text-side">
        <h1>Make <br />remote work</h1>
        <p>
          Get your team in sync, no matter your location. Streamline processes,
          create team rituals, and watch productivity soar.
        </p>
        <button>Learn more</button>
        <div class="clients-logos">
          <img src="https://i.postimg.cc/gJ9Y84m6/client-databiz.png" />
          <img src="https://i.postimg.cc/15DDqYSD/client-audiophile.png" />
          <img src="https://i.postimg.cc/5ybQqfbv/client-meet.png" />
          <img src="https://i.postimg.cc/g2NsxByN/client-maker.png" />
        </div>
      </section>
      <section id="img-side">
        <img
          class="desktop-img"
          src="https://i.postimg.cc/0Nt97Bhf/image-hero-desktop.png"
        />
        <img
          class="mobile-img"
          src="https://i.postimg.cc/ZnYfhwwW/image-hero-mobile.png"
        />
      </section>
    </main>
    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="https://codehemaa.com">Ophy Boamah</a>.
    </div>
  </body>
</html>

Here's the full CSS code:

* {
  font-family: "Epilogue", sans-serif;
  font-size: 1.3rem;
}

.logo {
  font-size: 1.3rem;
}

li {
  list-style: none;
}

nav,
.cta-btns,
.menu-items {
  display: flex;
  align-items: center;
}

nav {
  margin: 0 1.5rem 1.5rem 1.5rem;
  justify-content: space-between;
}

.mobile-nav {
    display: none;
}

.logos-section {
  display: flex;
}

.menu-items li,
.cta-btns li {
  font-size: 0.7rem;
  margin-right: 1rem;
  color: hsl(0, 0%, 41%);
}

.cta-btns li:nth-last-child(1) {
  border: 1px solid gray;
  padding: 0.2rem 0.7rem;
  border-radius: 0.3rem;
}

/* Client Logos */

.clients-logos img {
  width: 8rem;
  margin-right: -3rem;
}

.clients-logos {
  margin-top: 1rem;
  margin-left: -2rem;
  display: flex;
  width: 10rem;
}

.clients-logos img:nth-child(2) {
  width: 7rem;
}

/* Main */
main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 70vh;
  align-items: center;
  justify-content: center;
  margin-left: 8rem;
}
/* Images */
.desktop-img {
  display: block;
}
.mobile-img {
  display: none;
}

main h1 {
  font-size: 3rem;
}

main p {
  font-size: 0.7rem;
  width: 18rem;
  color: hsl(0, 0%, 41%);
  line-height: 0.9rem;
}

main button {
  background-color: hsl(0, 0%, 8%);
  color: #fff;
  border: none;
  font-size: 0.7rem;
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  margin-top: 1rem;
}

#text-side {
  margin-top: 3rem;
}
/* Hero Image */
#img-side img {
  width: 20rem;
}

.attribution {
  font-size: 0.7rem;
  text-align: center;
  margin-top: 5.5rem;
}

.attribution a {
  color: hsl(228, 45%, 44%);
  font-size: 0.7rem;
}

/* Responsive */
@media (min-width: 300px) and (max-width: 480px) {
  * {
    font-size: 1rem;
  }

  body {
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  nav {
    margin: 0 1.5rem 0 1.5rem;
  }

  nav ul {
    display: none;
  }

  .mobile-nav {
    display: block;
    margin-right: 2rem;
  }

  main {
    display: grid;
    grid-template-columns: 100%;
    margin: -3rem auto 0 auto;
  }

  /* Clients logos */
  .clients-logos {
    margin-top: 2rem;
  }

  .clients-logos img {
  width: 30rem;
}

.clients-logos {
  margin-top: 1rem;
  display: flex;
}

.clients-logos img:nth-child(2) {
  width: 7rem;
}

  /* Images */
  .desktop-img {
    display: none;
  }
  .mobile-img {
    display: block;
    margin-top: 3rem;
  }

  .cta-btns,
  .menu-items {
    display: none;
  }

  main h1 {
    font-size: 2.5rem;
  }

  /* Client Logos */
  .clients-logos img {
    width: 4.5rem;
    margin-right: 0.8rem;
  }

  .attribution {
    width: 13rem;
    margin: 10rem auto 0 auto;
    text-align: center;
  }
}

Conclusion

As a web developer, layouts should be the first thing you consider before writing code. Thankfully, CSS Grid and Flexbox have revolutionized the way we structure and build website and web app layouts.

This makes these concepts a must know so you can specify the arrangement of elements on the web. We've discussed the fundamentals, so that you can easily build up on the knowledge and create beautiful web pages and apps.

Thanks for reading 👋🏾. I hope you found this helpful.

This can become tricky at times. And based on certain conditions, a particular method may not work at some point, leaving you searching for alternatives.

In this article, you will learn how to center an image in a div with CSS.

How to Center a div using CSS

You center an image in a div in two ways: horizontally and vertically. When you put these two methods together, you will have an entirely centered image:

By default, web content always begins from the top-left corner of the screen and moves from ltr (left to right) – except for certain languages like Arabic, which goes from rtl (right to left).

Let’s start by seeing how to center an image within a div horizontally. Then we'll see how to center vertically. Finally, we'll see how you can do both together.

How to Center an Image in a Div Horizontally with Text-align

Suppose you have a div in which you place your image this way:

<div class="container">
    <img src="./fcc-logo.png" alt="FCC Logo" />
</div>

And apply basic CSS styling so your image is visible:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
}
.container img {
    width: 100px;
}

The text-align method won't work in all cases, as you typically use it to center text. But when you have your images within a block level container like a div, then this method will work:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    text-align: center;
}

.container img {
    width: 100px;
}

This works by adding the text-align property alongside its value of center to the container and not the image itself.

How to Center an Image in a Div Horizontally with Margin-auto

Another method that you can use to horizontally center an image within a div (container) is the margin property with the value of auto.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

You would usually apply this method to the image itself and not the container. But unfortunately, this property alone doesn't work. You also need to specify the width the image will take first. This lets the margin know the remaining width the container has so that it can be split equally.

Secondly, img is an inline element, and the margin-auto property set does not affect inline-level elements. This means you must first convert it to a block-level element with display property set as block.

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
}

.container img {
    width: 100px;
    margin: auto;
    display: block;
}

How to Center an Image in a Div Horizontally with the Position and Transform Properties

Another method you can use to position an image horizontally is the position property alongside the transform property.

This method can be very tricky, but it works. You must first set the container’s position to relative, then the image to absolute.

Once you do this, you can now move the image to whichever position you wish using either the left, top, bottom, or right properties on the image.

In this case, you only want to move the image to the center horizontally. This means you would move the image via the left to 50% or right to -50%:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
}

But when you check your image, you will notice that the image is still not perfectly placed in the center. This is because it started from the 50% mark, which is the center position.

In this case, you need to use the transform-translateX property to adjust it to get the perfect center horizontally:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

How to Center an Image in a Div Horizontally with Display-Flex

CSS flexbox makes it easier for you to design flexible, responsive layout structures without using float or positioning. We can also use this to place an image in the center horizontally of a container using the display property with flex as its value.

But this alone doesn't work. You also need to define the position where you want your image. This could be center, left or maybe right:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    display: flex;
    justify-content: center;
}

.container img {
    width: 100px;
    height: 100px;
}

Note: The display: flex property is not supported in older versions of browsers. You can read more here. You’ll also notice that the width and height of the image are defined to ensure the image doesn't shrink.

Let’s now learn how to center an image in a div vertically. Later we'll see how to center an image in a div horizontally and vertically together, making it a perfect center.

How to Center an Image in a Div Vertically with Display-Flex

Just like how you were able to center the image horizontally with the display-flex method, you can also do the same vertically.

But this time around, you won’t need to use the justify-content property. Rather you'll use the align-items property:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    display: flex;
    align-items: center;
}

.container img {
    width: 100px;
    height: 100px;
}

For this method to work, the container must have a specified height which you will use to calculate the height and know where the center is located.

How to Center an Image in a Div Vertically with the Position and Transform Properties

Similar to how you used the position and transform properties earlier to place your image in the center horizontally, you can also do the same vertically.

But this time around, you won't use left or right,. Instead you will use top or bottom alongside translateY rather than translateX:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

You have learned how to center an image within a div horizontally and vertically using all possible methods. Let’s now learn how to center both horizontally and vertically.

How to Center an Image in a Div Horizontally and Vertically with Display-Flex

The display-flex property is a combination of how you'd center the image vertically and horizontally.

For the flex method, this means you will use both the justify-content and align-items properties set to center:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container img {
    width: 100px;
    height: 100px;
}

How to Center an Image in a Div Horizontally and Vertically with the Position and Transform Properties

This is also very similar, as all you have to do is combine both ways you were able to center vertically and horizontally:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

You can also combine the translateX and translateY by using translate(x,y):

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Wrapping Up

In this article, you have learned how to center an image in a div vertically, horizontally, or both.

You will often use the Flexbox method when moving an image to the center because the position method can distort your web page and works very trickily.

You can learn more about the CSS position method here and then more about the flexbox method here.

Have fun coding!

One common problem you'll face as a web developer is how to place an element at the center of a page or within an element acting as its container. It's the ubiquitous "How do I center a div?" problem.

In this article, we'll see how we can center elements using various CSS properties. We'll see code examples in each section and a visual representation of the elements in all the examples.

How to Center a Div Using the CSS Flexbox Property

In this section, we'll see how we can use the CSS Flexbox property to center an element horizontally, vertically, and at the center of a page/container.

You can use an image if you prefer that, but we'll just use a simple circle drawn with CSS. Here's the code:

<div class="container">

      <div class="circle">

      </div>

</div>

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

Positioning with Flexbox requires that we write the code in the parent or container element's class.

How to Center a Div Horizontally Using Flexbox

Now we'll write the code to center the div element horizontally. We're still making use of the circle we created above.

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

We've added two lines of code to center the circle horizontally. These are the lines we added:

display: flex;
justify-content: center;

display: flex; allows us to use Flexbox and its properties, while justify-content: center; aligns the circle to the center horizontally.

Here is the position of our circle:

How to Center a Div Vertically Using Flexbox

What we'll be doing in this section is similar to the last one, except for one line of code.

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  align-items: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

In this example, we used align-items: center; to center the circle vertically. Recall that we are required to write display: flex; first before specifying the direction.

Here's the position of our circle:

How to Position a Div at the Center Using Flexbox

In this section, we'll position the circle at the center of the page using both the horizontal and vertical alignment properties of CSS Flexbox. Here's how:

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

Here are the three lines of code we added to the container class above:

display: flex;
justify-content: center;
align-items: center;

As expected, we begin with display: flex; which allows us to use Flexbox in CSS. We then used both the justify-content (horizontal alignment) and align-items (vertical alignment) properties to position the circle at the center of the page.

Here is the position of our circle:

How to Center a Div Horizontally Using the CSS margin Property

In this section, we'll be using the margin property to center our circle horizontally.

Let's create our circle again.

<div class="container">

      <div class="circle">

      </div>

</div>

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

This time we'll write the code in the circle class. Here's how:

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
  margin: 0 auto;
}

All we've added is the margin: 0 auto; line of code to the circle class.

Let's have a look at the position of the circle:

How to Center Text Horizontally Using the CSS text-align Property

In this section, we'll see how to center text horizontally.

This method only works when we are working with text written within an element.

Here is an example:

<div class="container">

    <h1>Hello World!</h1>

</div>

In the example above, we have created a div with a class of container and a h1 element with some text. This is what it looks like at the moment:

Let's write the CSS code.

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

h1 {
  text-align: center;
}

In other to align the text in the h1 element at the center of the page, we had to use the text-align property, giving it a value of center. Here's what it looks like now in the browser:

Conclusion

In this article, we saw how we can center elements horizontally, vertically, and at the center of the page using Flexbox and the margin and text-align properties in CSS.

In each section, we saw both a code example and a visual representation of what the code does.

Happy coding!

These layouts are so popular that they appear almost everywhere on the web. For example, check out Twitter's sidebar, which inspired this article:

Normally, to create a fixed menu with CSS you would have to use the position property with a value of either fixed or sticky.

The problem with this approach is that it takes the entire element out of the document flow like it was never there at all. This is one of those frustrating moments in CSS for beginners and sometimes even experts.

In this tutorial you'll learn how to create a fixed sidebar and fixed bottom navigation menu with CSS flexbox instead. I'll host all code and demos on Codepen so you can see a live preview of what we'll build.

Getting Started

To create a fixed element with Flexbox, you first need to disable scrolling on the parent element of the item you want to make fixed. In our case, the parent element is the body:

body {
    overflow: hidden;
    height: 100vh;
}

The Mark-up

We'll use HTML to create a two column layout wrapped in a div called wrapper.

<body>
<div class="wrapper">
  <aside>
    <ul>
      <li>Item</li>
      ...
    </ul>
  </aside>
  <main>
    <div class="wrapper_inner">
      <p>
        ...  
       </p>
     </div>
   </main>
 </div>
</body>

The CSS

To make the sidebar fixed, we just need to disable scrolling on the parent body and make the main element scrollable.

body {
  overflow: hidden;
  height: 100vh;
}
main {
  overflow-y: auto;
}
aside {
  flex: 1 0 10%;
}
.wrapper {
  display: flex;
  height: 100%;
}

Let's break down this code a bit.

First we made the body non-scrollable and hid the scrollbars with this code:

body {
    overflow: hidden;
}

Then using overflow: auto, we added the scrollbars back to the main element.

And then finally, we created a flex container wrapper and gave it a height equal to the parent using height: 100%:

.wrapper {
    display: flex;
    height: 100%;
}

How to Make it Mobile-friendly

But on a mobile screen with a width less than 500px we'll want the sidebar to be fixed to the bottom or top as the case may be. To do that you'll add the following CSS:

@media (max-width: 500px) {
  .wrapper {
    flex-direction: column-reverse;
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

}

Here on a mobile screen we change the direction of our flex wrapper to column instead of row. Then to make it fix to the bottom, we add the following:

.wrapper {
    flex-direction: column-reverse;
}

To make it fixed to the top, on the other hand, you just have to remove the column-reverse and change it to column like so:

.wrapper {
    flex-direction: column;
}

You can see a live preview in the pen created with Codepen below. You can resize the window to see the fixed bottom nav:

Conclusion

In this tutorial you learned how to create a responsive fixed sidebar with flexbox. Here are some important steps to remember:

1. To make an element fixed with flexbox, you have to disable scrolling on the parent element with overflow: hidden

2. Then you need to create a flex container with height equal to parent

3. Add overflow: auto to the element you don't want fixed

And that's it!

If you found this tutorial useful or have any questions, please feel free to connect with me on Twitter (don't forget to hit the follow button) @sprucekhalifa.

Oh and happy Coding!

This tutorial will teach you how to use and implement CSS Flexbox and CSS Grid alignment. We'll also cover many other CSS concepts. And finally, we'll learn how to make the page responsive so that it works on all screen sizes.

The tutorial is divided into five parts:

• How to Build the Navigation Bar

• How to Build the Showcase Section

• How to Build the Lower Section

• How to Build the Footer Section

• How to Make the Page Responsive

Each of these sections will teach you some new CSS and web development skills and tools. So let's jump right in.

How to Create the HTML Boilerplate

If you have emmet installed in your IDE, you can generate an HTML boilerplate for your project by typing ! and clicking the enter or tab key on your keyboard.

If not, you can copy this boilerplate code and paste it into your code editor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

</body>
</html>

How to Use Font Awesome Icons

As you can see in one of the shots, we will be using some font icons to give better swap to our service section.

For this, we will be using font awesome from the CDN. If you created an HTML biolerplate by yourself, copy the following link tag and paste it into your head tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />

Let's Get Started

First, make sure that your stylesheet file (.css) is properly linked to your HTML page.

How to Build the Navigation Bar

The Navigation Bar section is going to be comprised of our site's name as well as two navigation links: Log in and check courses.

Here is the markup for our navbar:

<div class="navbar">
        <div class="container flex">
          <h1 class="logo">Skilllz</h1>
            <nav>
              <ul>
                <li class="nav"><a class="outline" href="">Log in</a></li>
                <li class="nav"><a href="" class="outline">Check courses</a                 </li>
              </ul>
            </nav>
        </div>
      </div>

On the div wrapping the elements inside this section (the navbar), we register the container and flex class.

• .container: we will use this utility class in every section to make sure that the inner elements do not exceed a certain width which we'll specify in CSS

• .flex: we will use this utility class to display children elements in a horizontally aligned manner (side-by-side) using CSS Flexbox.

Inside the div we have an h1 with class of logo and two navigation links li>a with the outline classes, respectively.

At this point, our page will look all plain and bare like this:

No CSS yet

How to Apply CSS Styling to our Page

We now have to apply some CSS rules to style our nav section the way we want. What we want to do first is set the base styling for our web page with the following code:

/* Override default style and set padding and margin to nothing */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}

/* White text throughout */

body {
  font-family: "lato", sans-serif;
  color: white;
}

/* Make all link text black with no text decoration */
a {
  color: black;
  text-decoration: none;
}


h1 {
  font-size: 30px;
  font-weight: 600;
  margin: 10px 0;
  line-height: 1.2;
}


h2 {
  font-size: 25px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}

p {
  font-size: 30px;
}

/* All images must not be larger than parent container */
img {
  width: 100%;
}

/* No styling on list items */
li {
  list-style-type: none;
}



p {
  font-size: 20px;
  margin: 10px 0;
}

With the default styles applied, our page will now look like this:

Next, we need to define the styling for our container class:

/* Centers it, sets a maximum width and makes sure elements can flow past it*/

.container {
  margin: 0 auto;
  max-width: 1200px;
  overflow: visible;
}

Now, our content will not exceed the maximum width specified.

After that, we need to set the background color of our navbar section to purple:

/* Sets background color, height and padding*/

.navbar {
  background-color: purple;
  height: 70px;
  padding: 0 30px;
}

Then we target only the h1 element inside the navbar and specify the following styles:

/* Sets font size, reduces font-weight, adds margin and line height */

.navbar h1 {
  font-size: 30px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}

With that style applied, our h1 heading will look like this:

Now we need to display both child elements inside the container h1 and nav side-by-side using Flexbox.

.navbar .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

First, we set the display mode to flex. This will align the elements side by side by default.

We then justify the content, adding a considerable space between each item using the space-between value. We align the items to appear at the center (middle) of the container and set its height to take up the entire container.

This is what our page should now look like:

Cool right?

However, we also do not want both of our navigation link stacked on top of each other. Instead, we want them to be displayed side-by-side. Guess how we do that? With Flexbox!

.navbar ul {
  display: flex;
}

/* Changes the color of both links to white, adds padding between them and margin as well */

.navbar a {
  color: white;
  padding: 9px;
  margin: 0 10px;
}

Our page will now look like this:

The power of CSS flexbox

If you watched the brief intro video, you will notice that whenever I hover over any of the links, the text color changes to a lighter shade of purple and a solid border appears below it.

We can implement this transition using the CSS :hover pseudo-element:

.navbar a:hover {
  color: #9867C5;
  border-bottom: 3px solid #9867C5;
}

Now watch this:

Hover effect on the links

And with that, we have come to the end of the navbar section.

How to Build the Showcase Area

The showcase area is going to house the headline text, supporting text, a form for signing up new users, as well as a headline image.

This section is going to be divided in two: the left side and the right side. In other words, it will be displayed as a grid of two units.

Here is the markup for this section:

<section class="showcase">
        <div class="container">
            <div class="grid">
              <div class="grid-item-1">
                <div class="showcase-text">
                  <h1>Learn any digital skill of your choice today</h1>
                  <p class="supporting-text"> Over 30,000 students currently learn with us</p>
                </div>
                <div class="showcase-form">
                  <form action="">
                    <input type="email" placeholder="Enter your email address">
                    <input type="submit" class="btn" value="Start Learning">
                  </form>
                  <p class="little-info">Try out our free courses today. No risk, no credit card required</p>
                </div>
              </div>

              <div class="grid-item-2">
                <div class="image">
                  <img src="./images/transparent.png" alt="">
                </div>
              </div>
           </div>

        </div>
      </section>

Currently, our app is going to look a bit messy:

How to Apply CSS Styling to our Showcase Area

First, we set the height of the showcase section as well as a background color:

.showcase {
  height: 300px;
  background-color: purple;
}

Our app will now look like this:

Still messy

NOTE: I changed the color of h1 to white

Next, we apply the following styles:

/* Adds margin below the text */
.showcase p {
  margin-bottom: 30px;
}

/* Adds a shadow below the image */
.showcase img {
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.2);
}

/* Adds some padding on the form content */
.showcase-form {
  padding-left: 7px;
}

This brings us to the main activity. If you remember, I said that we were going to be creating two sections (grids) inside the showcase container. With the grid class registered on that container, we can align its content using CSS grid display like this:

.grid {
  overflow: visible;
  display: grid;
  grid-template-columns: 60% 40%;
}

This will create two columns inside of our showcase container. The first part will take up 60 percent of the container, and the second part will take up the remaining 40 percent of the container.

The overflow visible will ensure that the image (if bigger than the container) will flow beyond the container.

Our app will now look like this

Next, we need to set some space between the navigation area and the showcase area.

.grid-item-1,
.grid-item-2 {
  position: relative;
  top: 50px;
}

As a result, it is now spaced out a bit:

Now, we need to style both of our form inputs because they don't look so nice. We select the first input by its type (email) and select the second by its class name, btn.

.showcase input[type='email'] {
  padding: 10px 70px 10px 0;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  padding-left: 6px;
}

.btn {
  border-radius: 6px;
  padding: 12px 20px;
  background: #9867C5;
  border: none;
  margin-left: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

This style will transform both our form inputs to this:

Form input styled better

Also maybe change the font of the supporting text:

.showcase-form {
  margin: auto;
}

/* Change typeface and its size */
.little-info {
  font-size: 15px;
  font-family: "poppins", sans-serif;

}

This is the final look of our showcase section:

Final look of showcase section

That's it for this section!

How to Build the Lower Part of the Page

The lower part of the page is going to contain two sections, the stats section and the testimonials section.

The stats container which displays the services offered by Skilllz will be made up of three divs, each of which houses a font awesome icon, an h3 of class title, and a paragraph p of class text.

The testimonial container will hold the testimonials of three random people who learned using Skillz. I grabbed the pictures from unsplash.

How to Build the Stats Section

First, we are going to work on the stats section. The text is just a dummy 'lorem50' text to act as a filler for this demo.

Here is the markup for it:

<div class="lower-container container">
      <section class="stats">
        <div class="flex">
          <div class="stat">
            <i class="fa fa-folder-open fa-2x" aria-hidden="true"></i>
            <h3 class="title">Over 300 available courses</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="stat">
            <i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>
            <h3 class="title">Free certificate offered on all courses</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="stat">
            <i class="fa fa-credit-card-alt fa-2x" aria-hidden="true"></i>
            <h3 class="title">Book 1on1 session for as low as $5</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </section>

This section will be displayed as a blank page. This is because we had set the color of our text in the whole body to white. So we have to add some styling.

How to Apply CSS Styling to the Stats Section

First we need to apply the following styles:

/* Centers the container, sets a maximum width
.lower-container {
  margin: 120px auto;
  padding: 0;
  max-width: 1400px;
}


/* Targets all h3 with class of title */
.title {
  color: black;
  font-size: 20px;
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
}

/* Targets the paragraphs with class name of text */
.text {
  color: black;
  font-size: 19px;
  width: 100%;
  padding: 10px;
  margin: 0, 20px;
  text-align: justify;
}

This will now make our text visible:

Notice that the font icons from Font Awesome are not visible. We will be working on that pretty soon.

But before then, we will need to do something important. We do intend for all of the three stat divs to be aligned horizontally (side-by-side). To achieve that, we will once again be using CSS Flexbox:

/* Display horizontally, put a little space around them */
.flex {
  display: flex;
  justify-content: space-around;
}

/* Add some padding around the container. Align text centrally */
.stats {
  padding: 45px 50px;
  text-align: center;
}

/* Set margin and width */
.stat {
  margin: 0 30px;
  text-align: center;
  width: 800px;
}

This is how our app will now look:

Still no icons? Time to fix that!

.stats .fa {
  color: purple;
}

and voilà!

How to Build the Testimonials Section

The second section inside of the lower container div of the page is the testimonials section. This section is going to be made up of three cards, each of which contains the image of the person (clipped inside a circle), their name, and the person's testimonial.

Here is the markup for that:

<section class="testimonials">
      <div class="container">
        <div class="testimonial grid-3">
          <div class="card">
            <div class="circle">
              <img src="./images/4.jpg" alt="">
            </div>
            <h3>Aston</h3>
            <p>I have learnt web development using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!</p>
          </div>
          <div class="card">
            <div class="circle">
              <img src="./images/5.jpg" alt="">
            </div>
            <h3>Beth</h3>
            <p>I have learnt copywriting using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!</p>
          </div>
          <div class="card">
            <div class="circle">
              <img src="./images/6.jpg" alt="">
            </div>
            <h3>Chris</h3>
            <p>I have learnt affilitate marketing using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!</p>
          </div>
        </div>
      </div>
    </section>

How to Apply CSS Styling to it

First, we set the text color to black so we can see it:

.testimonial {
  color: black;
  padding: 40px;
}

When applied, it should make the text visible and add some padding to the section:

Next, we set the image to take up the height of its parent container:

/* Wrap the image inside a cirle shape and set height to take up all of parent element */

.testimonial img {
    height: 100%;
    clip-path: circle();
}

/* Align text centrally */

.testimonial h3{
  text-align: center;
}

If you check the final layout in the gif, you will notice that all three testimonial cards are aligned side-by-side on the same line.

So we will need to create a div of three equal columns using the CSS grid arrangement.

/* Create a grid of three equal columns. Set a gap of 40 px between them */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}


/* Create a white card with some shadow around it */
.card {
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  box-shadow: -7px -7px 20px rgba(0, 0, 0, 0.2),
               7px  7px 20px rgba(0, 0, 0, 0.2)
}

With all of these styles applied, the testimonials section will now look like this:

Finally, we style the circle div and position it relative to the top border of the card using CSS:

.circle {
    background-color: transparent;
    border:3px solid purple;
    height:90px;
    position: relative;
    top: -30px;
    left: 120px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:90px;
}

And here is how everything will look in our browser:

Final look

Alright, now we're ready to move on to the footer section. Then we'll learn how to make the site responsive.

How to build the Footer Section

The final part of our landing page building process is to create the footer section. The footer section will comprise some copyright text, three extra navigation links, and a group of social media icons from Font Awesome.

Here is the HTML Markup for the footer section of our landing page:

<footer>
   <div class="container grid-3">
     <div class="copyright">
       <h1>Skilllz</h1>
       <p>Copyright &copy; 2021</p>
     </div>
     <nav class="links">
       <ul>
         <li><a href="" class="outline">Home</a></li>
         <li><a href="" class="outline">Tutors</a></li>
         <li><a href="" class="outline">Categories</a></li>
       </ul>
     </nav>
     <div class="profiles">
       <a href=""><em class="fab fa-twitter fa-2x"></em></a>
       <a href=""><em class="fab fa-instagram fa-2x"></em></a>
       <a href=""><em class="fab fa-facebook fa-2x"></em></a>
       <a href=""><em class="fab fa-whatsapp fa-2x"></em></a>
     </div>
   </div>
 </footer>

The footer section will look unattractive without any styling:

No CSS yet

So let's change that.

How to Style the Footer

First, we need to set the background colour for the footer section (as well as the color for all links) to white, like this:

/* Add padding around the footer as well */

footer {
  background-color: purple;
  padding: 20px 10px;
}

/* Sets all link texts to white and puts margin to the left and right */

footer a {
  color: white;
  margin: 0 10px;
}

Now the footer will look like this:

Footer

If you check the first gif, you will notice that when I hover over any of the links inside of the footer, their color changes to a lighter shade of purple and a border also appears below them.

We can make this happen using a :hover selector:

footer a:hover {
  color: #9867C5;
  border-bottom: 2px solid #9867C5;
}

That's all for the footer!

How to Set Media Queries to Make the Page Responsive

It's now time to make our landing page more responsive. When building a website, it is important to have in mind that users will be viewing the site from different devices. So it is imperative to make the site layout responsive to improve the user experience across multiple devices.

In our CSS, we will define media queries which set breakpoints for the various screen widths of different devices and map a set of CSS rules for each screen size.

How to Design for Tablets and Smaller Screens

First, we will optimize our site's layout for users viewing from a tablet. In our CSS, we define the following style:

/* Tablets and Under */

@media(max-width: 768px) {
  .grid,
  .grid-3 {
    grid-template-columns: 1fr;
  }

Initially we had set two columns for the .grid class and 3 columns for the grid-3 class. Now, we want to make sure that all grid items take up just a single line.

As a result, our form and image which was formerly displayed side-by-side (horizontally) will now be displayed one after the other (vertically), like this:

Next, we'll apply the following styles:

/* Align all text to the center. This will move all text, including form centrally */

.showcase {
    height: auto;
    text-align: center;
  }

/* This resets the width of the image container and adds margin space to the left */ 

.image {
    width: 600px;
    margin-left: 80px;
  }

/* Changes the service sections from side-by-side orientation to each taking its own line. Aligns text to the center */

.stats .flex {
    flex-direction: column;
  }

  .stats {
    text-align: center;
  }

/* Makes sure each stat section does not exceed the width of parent */

.stat {
    width: 100%;
    padding-right: 80px;
  }

/* (re)Moves the cirle to the center of the card */

.circle {
      background-color: transparent;
      border:3px solid purple;
      height:90px;
      position: relative;
      top: -30px;
      left: 270px;
      border-radius:50%;
      -moz-border-radius:50%;
      -webkit-border-radius:50%;
      width:90px;
  }

And voilà! Our site now works on tablets and smaller screens.

The result

How to Design for Mobile Devices

Many people may view the site from a mobile device which typically has the smallest screen size out of all devices. Because of this, creating a layout for mobile-sized screens is very important.

/* Mobile devices */
@media(max-width: 500px) {
  .navbar {
    height: 100px;
  }

First, we increase the height of our navigation area. Since it will be viewed from a smaller screen, we want the area more accentuated for the user.

Then, we define the following styles:

/* Changes the alignment. The logo title stays at the top, the nav links will be below it */

.navbar .flex {
    flex-direction: column;
  }


/* When hovered on, retain white color and change border to black */

  .navbar a:hover {
    color: white;
    border-bottom: 2px solid black;
  }


/* Set light purple background on nav links, make it a bit round and add some spacing */

  .navbar ul {
    background: #9867C5;
    border-radius: 5px;
    padding: 10px 0;
  }


/* Align text to center */

  .showcase {
    height: auto;
    text-align: center;
  }


/* Reduce font size */

.little-info {
    font-size: 13px;
  }


/* Reduce image width */

  .image {
    width: 350px;
    margin-left: 70px;
  }

  .stat {
    margin-bottom: 40px;
  }


/* Move circle once again */

.circle {
      background-color: transparent;
      border:3px solid purple;
      height:90px;
      position: relative;
      top: -30px;
      left: 150px;
      border-radius:50%;
      -moz-border-radius:50%;
      -webkit-border-radius:50%;
      width:90px;
  }
}

And voilà!

Wrapping Up

FlexBox and Grid alignment are very powerful tools for laying out a web page however you want it to look.

Responsive web design is arguably one of the most important design principles in web development. We have to consider the fact that our site will be viewed from various kinds of devices with different screen resolutions. Optimizing our site's layout for different screens will improve the user experience.

In this tutorial, we have designed a simple landing page using CSS Flexbox, Grid, and many other CSS properties. We have also made the page look good on Tablets and Mobile Screens.

The full code for this project can be gotten from this GitHub repository.

I hope you learned something useful from this tutorial. If you have any suggestions, reach out to me on Twitter. You can also visit my blog for posts like this.

Thanks for following along and see you soon.

It's been the subject of many jokes and memes, and when you successfully center something, you'll want to brag about it.

Why is Centering CSS Elements So Hard?

CSS can be tricky to work with. For example, if you're trying to align something horizontally OR vertically, it's not that difficult.

You can just set text-align to center for an inline element, and margin: 0 auto would do it for a block-level element.

But issues arise on multiple fronts if you're trying to combine both vertical and horizontal alignments.

In this tutorial, I will introduce you to three different methods to correctly center a div, text, or image in CSS.

How to Center an Element with the CSS Position Property

The CSS position property takes relative, absolute, fixed, and static (the default) as values. When set, you will be able to apply the top, right, bottom, and left properties to the element.

The combination of relative and absolute values can get a lot of things done, and so you can use it to center anything.

Take a look at the snippets below to see some examples.

How to center text with CSS positioning

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} 

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

How to center an image with CSS positioning

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

The above code has made the text and image centered vertically. To take care of both vertical and horizontal centering, we need to make a little tweak in the CSS. We'll set the top property to 50%, and we'll add a transform on both the X and Y axes.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  height: 400px;
  border: 2px solid #006100;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

The text now looks like this:

And the image like this:

Note that I applied the transform property because the child (with the class of centered-element) was slightly off-center. translateY() pushes it to the center vertically and translate on both the X and Y-axis (translate()) pushes it to the center vertically and horizontally.

How to Center an Element with Flexbox in CSS

CSS Flexbox handles layouts in one dimension (row or column). With Flexbox, it is pretty easy to center a div, text, or image in just three lines of code.

Check the snippets below for examples.

How to center text with Flexbox

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    height: 600px;
    border: 2px solid #006100; 
}

How to center an image with Flexbox

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    height: 600px;
    border: 2px solid #006100; 
}

We took care of the vertical alignment in just two lines of code. To make the image and text horizontally centered, add in justify-content: center.

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, I'm now vertically and horizontally centered</p>
    </div>
</div>

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
    border: 2px solid #006100;
}

The text now looks like this:

And the image like this:

How to Center an Element with CSS Grid

With Flexbox, it is pretty easy to center anything, right? But with CSS Grid, it is really easy to center anything, because two lines of code are enough to do it for you.

How to center text with CSS Grid

<div class="container">
    <div class="centered-element">
      <p>I'm a Camper, and I'm vertically centered</p>
    </div>
</div>

.container {
    display: grid;
    align-items: center;
    height: 600px;
    border: 2px solid #006100;
}

How to center an Image with CSS Grid

<div class="container">
    <div class="centered-element">
      <img src="freecodecamp.png" alt="centered" />
    </div>
</div>

.container {
    display: grid;
    align-items: center;
    height: 600px;
    border: 2px solid #006100;
}

The above examples takes care of vertical centering for you. To get the text and image centered horizontally too, replace the align items with place items – a combination of both align-items and justify-content:

.container {
    display: grid;
    place-items: center;
    height: 600px;
    border: 2px solid #006100;
}

The text now looks like this:

And the image like this:

How to Center a Standalone Div, Text, or Image in CSS

The three methods above let you center a div, text, or image in a container. You can also center a standalone div, text, or image.

Let's see how to do that now.

How to center a standalone div in CSS

<div class="container"></div>

div.container {
    height: 300px;
    width: 300px;
    border: 2px solid #006100;
    margin: 0 auto;
  }

How to center standalone text in CSS

<p>I'm a Camper, and I'm centered</p>

     p {
         text-align: center;
     }

How to center a standalone image in CSS

<img src="freecodecamp.png" alt="centered" />

img {
      display: block;
      margin: 0 auto;
 }
 /* Applies a display of block, a margin 0f 0 at the top and bootom, 
 and auto on the left and right */

Conclusion

I hope this tutorial gives you enough knowledge about vertical alignment and how to center elements in CSS so it's less of a hassle for you in your next project.

Thank you for reading, and keep coding.

Flexbox is a powerful responsive web design tool that's built right into CSS itself.

And we just published a CSS Flexbox crash course on the freeCodeCamp.org YouTube channel.

James Maxwell created this course. Not only did he create the course but he also created some amazing PDF cheat sheets to go along with it.

Flexbox Cheat Sheets

The flex layout model allows responsive elements within a container to be automatically arranged depending upon the size of the screen.

You will learn about properties such as display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, and more.

You can watch the full course below or on the freeCodeCamp.org YouTube channel (35-minute watch).

Transcript

(autogenerated)

Understanding CSS Flexbox is important if you want to make responsive websites, James Maxwell created this course, along with some amazing PDF cheat sheets to go along with it.

Flexbox is going to change your perspective about web designing.

And again, for the power of course, I have created two beautiful PDF cheat sheets, which you can download.

These cheat sheets have got every single property that we're about to learn now.

One is exclusive for the parent container properties, and the others exclusive for the child properties.

You can use this cheat sheet for your future reference, I highly encourage everyone to follow the video now, and then later use the cheat sheets.

So let's dive into the concept of Flexbox.

Without any further delay, we are going to create a separate file for this learning purpose so that you can refer the file along with the cheat sheets in the future.

Let's quickly set up a head Sumo file using the Emmet function.

Now, I'm going to teach you guys another embed function to create a container and the children inside it.

So we need a div tag with a class container.

And then inside a greater than symbol to create a few children inside the container.

Let's give the Child Element a class called items.

So again, we'll have to enter a dart and just type items.

And we also want every child element to have a unique number to it.

So insert a hyphen, then insert $1 symbol times five.

This Emmet function will create a container with five items numbered within it.

We also want the items to have one unified Alias Name to them.

And we're going to call it as item.

So again, insert a dart and just type item.

Now hit enter.

How simple was that? This might look a little intimidating at the beginning.

But once you get used to it out of practice, you won't be able to create head Sumo containers without these beautiful image functions.

To learn more about these mn functions, you can visit Doc's dot me.io.

Now before moving to our CSS file, we'll have to fill in the numbers inside a div tag.

Let's quickly create a CSS file and link to the HTML file.

Let's begin with the basic reset using the universal selector.

So we're going to set the margin to zero padding to zero and box sizing border box.

Next, we're going to style the container and the child elements to implement the Flexbox properties.

So we're going to target the container now.

And give it a background color of hash Ca Ca NCAA, which is a light gray color.

And then give it a padding of 10 pixels.

Then a margin of 50 pixels.

Next, we're going to talk at the item selector.

And we're gonna give them a background color of hash, ff 0037, which is a nice red color.

And then for the font and so the item, they're gonna give them a white color.

Font Size of 35 pixels, padding of 20 pixels and a margin of 10 pixels.

If you see here, we haven't implemented any Flexbox yet, but we have a gray color container and red color items inside the container.

The items could be anything in a real website.

It could be the navbar of the website, or few majors paragraphs or whatever.

This video is all about the Flexbox container properties.

To enable Flexbox we'll have to set the display property to flex inside the container.

So let's set the display property to flex inside a container.

You can already see the magic Flexbox has produced a work a lot as you can see, to create this kind of layout using the float property position property and the margin properties, it would have been a tedious process, I would never take that risk personally, just by setting the display property to flex in the parent container, the child elements have become the flex items.

Now, let's talk about the flex direction property.

The flex direction property is used to find the direction of the flex items within the container.

By default, the flex direction is set a row.

When the flex direction is set a row, you see nothing happens.

Apart from row, there are a few other direction values that will change the direction of the children inside the container.

Let's see them one by one.

When we change the flex direction column, you can see the children items are arranged vertically in a column.

That's the superpower Flexbox.

By setting the direction to column, we have changed the axis itself.

There are two different axes according to Flexbox, the main axis and the cross axis, the axis differs for different directions.

For the flex direction set row, the main axis would be the x axis.

For the flex direction set of column, the main axis would be the y axis.

This concept is nothing related to the Flexbox, our web development, this basic math, to invert the direction of the flex items in either column or row, we can use the column reverse or the row voice values.

When the direction is set a column reverse.

You can see the direction of the items are inverted in the y axis.

So the main axis here goes from the bottom to top there before it was going from the top to bottom.

And of course, the numbers are in the reverse order fires in the top and one isn't the bottom.

The same rule applies for reverse, you can pick the right word that one would do.

So when I said the flex reaction to reverse? Exactly, it stacks the items in the reverse order.

Here, the main axes most from right to left.

And the numbers are also in the reverse order, you should always be aware of the main axis.

That's really important.

Since we've experimented all the possible values for flex reaction property, let's set it back to row which is the default value.

We haven't explored much about Flexbox yet, but I'm sure you could understand how much Flexbox is going to help us in the making of a responsive design.

Probably when designing for a smaller screen, we can simply set the flex direction to column, which will stack the items one on top of the other.

So that's all about the flex direction.

Next up, I want to discuss about the justify content property.

So remember that the justify content properly defines how the flex items should be stacked along the main axis.

Let's start with the center value here.

Now automatically, all the flex items are stacked in the center here.

Let me zoom in a little bit so you can see things clearly.

Right, you can always use the dev tools to inspect the elements.

The browser has understood that this div tag is using Flexbox.

When you hover over the justify content property, you can see how beautifully Flexbox had calculated the distances and align the items in the center.

Just imagine if we didn't have Flexbox.

To create this very simple layout.

Well, we should have used a float property that would have been a real nightmare for us.

So the center value aligns the flex items right in the center of the container.

But it does not do anything with the space in between the items.

The space between the items is because of the margin value we give for item selector.

So if the comment is value, you can see a flex items are tightly packed.

Let's quickly uncomment this margin and experiment the next value which is space between so let's change the justify content space between then we said the justify content space between you can see that the space between our flex items are evenly distributed.

We didn't have to specify any number here, but Flexbox automatically calculates the distance and distribute the items according to the space available.

The best part here is the other side.

Have a browser, the space between items also adjust.

That makes it really handy to create a responsive layout.

Let's now come on the margin property inside the item selector again, because we're going to explore another value which is similar to the space between called the space around changing the justify content space around you can see the space around value had created equal amount of space on both the left and the right side of the flex items.

The space between these two items is twice the amount of space on the left side of this item.

Next up, we're going to see the space evenly value.

So changing the ship icon or space evenly.

When I started using the flex box, I initially didn't understand the difference between these values, that's totally normal.

You'll start understanding these values once you start using them in your projects.

So setting the value to space evenly, you can see that the space between the flex items is evenly distributed on both sides.

The space between flex item one and flex item two is the same as the rest.

So while space II will ensure that the space between the items is always the same on both the sides, the space around nature that the space around each item is the same on the left and the right side.

Definitely not a big difference, but the usages differ completely.

There are two more values for the justify content property, the flex start and the flex end values and the justify content they serve flex start.

Well, it is the default value.

Let's uncomment the margin value to ensure that yes, it is the default value.

Now, if he said the justify content, a flex end.

Here a very complete attention.

People often confused between raw reverse and the flex in values.

Reverse will invert the order of the flex items.

But the flex in value when you move the flex items to the end of the container, maintaining the margin if provided.

Alright, the last property we're going to discuss in this video is the Align items.

To justify content property aligns the flex items along the main axis, but the Align items property aligns the flex items along the cross axis.

In order to make the Align items property work, we're now going to make one of the flex items bigger than the rest.

Because every flex item is having an unified hide.

So it will be difficult to demonstrate the Align items property to kind of pick the third item and set its height to 150 pixels.

Let's also change the justify content center.

And here it is.

I'm just noticing an error with my nomenclature.

I've included numbers for items, which should have been four item that's totally fine.

Here, you can see that all of flex items are now having a height of 150 pixels and not just the flex item three.

That's not a bug, but it happens because the default value for our line items is scratch.

When the line item is to stretch, this is what happens.

So let's also add the Align items to center.

All right, we can visualize how align items property align or flex items along the cross axis.

Here we have one flex item that is bigger than the rest.

And with the Align items property service center, we center the smaller flex items relative to the bigger one in the vertical fashion.

If we now set the Align items to flex start all the items will start at the top along the top of the bigger flex item.

The opposite will happen if we say the Align items to flex end.

So the flex items align equally at the bottom.

So far we saw center flex start flexing and the stretch values for the Align items property.

The stretch value Prices stretch the height of all flex items to match the height of the tallest flex item.

There is one last value for the Align items property, it is called the baseline.

It lies the baseline value will first have to increase the font size of one of the item.

So let's select item number four, and increase its font size to sound pixels.

If we now set the Align items to baseline, you can see that it aligns all the flex items along the text inside the item number four on an imaginary line.

I'm not going to reset a line items center and get rid of items number four, and items.

Number three selectors here.

All right, we're coming to the end of this video.

So flex direction, justify content, and the Align items are the most important and the frequently use properties.

Of course, there are a few other properties, but we will see them in another video.

Before we end this video, I want to answer to one of the highest rated question, what will happen to justify content and the Align items property and the flex direction instead of column? Well, let's check that out.

Great.

If you notice, the main axis had changed now.

It is no longer going from left to right.

But it is going from top to bottom.

Everything is fine.

But why is that the items are aligned to the center yet? Well, that's due to align items, they said the center and the flex direction the set of column.

When the flex direction is set a column, the main axis would be the y axis and the cross axis would be the x axis.

We know that the Align items property affects the cross axis.

And that's why our items are aligned at the center vertically.

So if we now set the Align items to flex end, and you can see that the items are aligned at the end of the container vertically.

The opposite of this will happen if we said the Align items to flex start.

And yes, the items are stacked at the beginning of the container.

So I would again emphasize you guys to always keep a track of the main axis and the cross axis in order to use justify content and align items in the right way.

Now for your better understanding.

I'll also experiment with the justify content when the flexor action is a call.

For that, we should first set a height value for the container.

So maybe let's set it to 1400 pixels.

And then I'll decrease the size of my viewport.

Now that said justify content space between here if I hover over the justify content on my dev tools, you can see that the space between the items are distributed just as we saw earlier, but in the vertical direction.

All right, let's end this video here.

I know I'm leaving most of you with a skeptical mind.

But that's totally normal for any beginner.

I felt the same when I learned Flexbox for the first time.

And that's why I made those beautiful cheat sheets for the reference purpose.

I feel it would have been better if someone gave me those cheat sheets when I started learning Flexbox you can now rewatch this video along with the cheat sheet so that you get a better clarity about these concepts.

Let's quickly set the flex direction row, remove the height and set justify content in align items center and end this video.

Great.

Let's meet back in the next lecture to learn more about the Flexbox concepts.

The last lecture, we learned three important Flexbox container properties.

There are a few more but we'll see them later.

Now in this video, let's learn about the Flexbox child properties.

So this is where we left in our last video.

The first property we're going to learn in this lecture is the Align self property.

The lens of property is similar to the Align items property.

With the help of align items property, we were able to collectively change the alignment of a flex item Along the cross axis, but the Allen self property will align one single flex item along the cross axis.

And it can also override the Align items property.

I know it sounds like gobbledygook, let's see them in action to understand how it works.

to experiment the outlines of property, let's again create the item three selector and give it a height of 150 pixels.

You're going to use item three as a reference point.

So let's try applying a lens off to item number four.

Right after item number three, you're going to create item number four selector and creating a lens of property here.

Let's set this to flex start.

Well, you can see that when the item number four is aligned at the start of the flex container, and all of the flex items are aligned to the center of item three along the cross axis, align self property accepts every single value that align items property accepts.

But as I told you earlier, we use a lens of property only to align an individual item.

Now, let's change this to flex and and see what happens.

So the item had moved to the bottom of the flex container.

Now, when Allen's office said a stretch.

Well, the item stretches to match the height of the tallest item, which is item three in our case.

Now, I'll leave this to you guys.

Go ahead and experiment the other possible values like center space between space evenly spaced around and try to analyze the use cases.

Next up, we're going to play with the order of a flex items.

The auto property is used to change the portion of flex items within the container to experiment this property to going to create selectors for all of flex items and change the order the initial value of order zero.

So according to Flexbox, the flex item one is in the zero portion.

Let's set order property to every flex item and change the potions.

So we're going to move item one to push in three.

Then item two, to potion for item three, to question zero item for position one.

item five to question two.

So after saving the file, you can see our items are relocated.

want you guys to understand that these values are give here are just experimental values.

You can go ahead and arrange the items as you wish.

But again, I would encourage everyone to follow the order I'm giving here so that we continue on the same track.

If you see here, one is a third question to set forth version three is add zero to question four is that first question and phi is that second portion.

The auto property will be handy for us to relocate the portion of the elements when it comes to responsive design.

You can see some people using negative values to change the order.

But I never encourage anyone to use negative values that will confuse us when we look at our code in the future.

That's all about the auto property.

We're now going to see the last three properties associated with the flex box child items.

The flex grow flex ring and the flex basis and remove the auto properties from all of flex items.

The first going to see the flex grow property now.

The flex group property enables a flex item to grow.

To grow a flex item.

All we do is specify an integer, just a number like how we assigned to the auto property.

to experiment this property.

Let's apply generally in the item selector.

So I'm going to create a flex group property and set it to one.

Well, all of flex items have become larger in size.

So here all the flex items are occupying the empty space that they can fit into the container.

In other words, the occupying the maximum space available inside the container we can visualize is better if we again come in the margin property.

You can see they're touching each other now, and occupying all the space that they can, that's about the flex grow property that we uncover this margin property now.

So even if you change this one 200, they're not going to get any bigger than this.

That's because the value only matters in relation to the rest.

Let's reset this value to one and try to understand how the value matters.

In relation with the other flex grow values.

Let's add a flex group property to item four and give it three.

So here, item number four is three times bigger than the rest of the flex items.

By this I'm sure you can understand how the flex group property works relatively.

When I change this three to five, it's going to become five times bigger than the other flex items.

That's all about the flex group property.

Let's remove the flex group property from item number four and discuss about a short end property.

So the last few properties we are learning have a shortened property to them, we can directly call them using the flex keyword.

So with the flex keyword, we can declare three different values.

The first value will be for a flex grow property, the second will be for flex ring.

And the last will be for flex basis, then we simply give one is the first value, it will automatically understand that we're declaring the flex grow value.

So if remember the grow keyword from here, every flex item is still occupying the maximum space.

This method is going to be extremely handy when it comes to real world projects.

And in most cases, we'll be using the shorthand property in a project.

Maybe we want one of our flex items to grow larger than the rest.

For example, let's try growing the last item.

Now setting flex five to item number five, you can see that it is occupying the maximum space and the rest are relatively occupying the available space.

This is all about the flex grow property.

Next up, we're going to see the flex basis property.

Flex basis property will set the width of a flex item.

Instead of using the width property, we can use the flex basis using the flex basis property or the width property would mean the same.

That's always a personal choice.

But in my opinion, I would say it is always good to practice to use the flex basis property so that we'll be able to differentiate the flex item and the nominal item.

Now for our example, I'm going to change this to flex basis and said this is 75 percentage.

When we're using the flex basis property, we should declare a percentage based value or a pixel based value.

Now, the item number five is occupying 75 percentage of the container and the rest are altered to occupy the remaining 25 percentage space by setting the flex basis to auto in the background.

Do not worry if you're not able to understand the difference between these properties.

You're going to use them a lot in our course.

So you'll eventually understand them out of practice.

The very last property we're going to see in this video is flex shrink.

So to show you guys what the fracturing property does, let me change this percentage value to pixel based value.

Maybe let me change this to 700 pixels.

Right.

Let me also minimize my browser window to demonstrate this property.

Now, if I increase the viewport width, just see what happens.

So you can see that our item number five shrinks at a certain breakpoint.

In spite of setting its flex basis to 700 pixels, it shrinks at a certain point.

To avoid this, we declare the flex string property and set it to zero.

The only two values to the flex string property one and zero.

So it works as a binary property.

By default it is set to one which means it will shrink the flex item at a point.

Let's try setting the flex string property to zero and see what happens.

But before that, let me expand my browser window size Going to my text editor.

I'm going to set a flat string property to item number five and set it to zero.

Now, if I try to decrease my browser window size Well, you can see that after setting flexion to zero, no matter how much size we take off from the viewport, the item number five is not shrinking.

But the rest of the items are overflowing the viewport.

In most case, people ignore to understand that they using the flex ring property.

In real time we use a flex keyword where we can consecutively declare all three properties flex grow flex ring, and the flex basis that we want to target the flex basis, aka the width property to set the flex items with.

And that's how we'll be implementing in our course too.

After watching this video, I highly encourage everyone to open up the cheat sheet and practice until this point.

In the next video, we're going to learn the rest of the flex container properties and in this section.

Before we end this section, I would like to teach you guys how to handle a lot of flex items into the flex container.

So right now we have five flex items.

Let's simply add another five flex items to our container and receive the class names.

So you can see that all these flex items are closely packed to fit into the container, and some are overflowing the flex container at zoom a browser to 150 percent is for the demonstration purpose.

If you don't find these items overflowing, simply zoom your browser window as I've said.

Now coming back to the point, we have this one last video for this section.

Because they've got a solution if you find a flex items getting cramped up like this.

So we can use the flex wrap property to overcome this issue.

The default value for flex wrap is no wrap.

And that's why our flex items are overflowing the container.

But if we create a flex wrap property into the container selector and set it a wrap.

Then this will create a new line like this to fit all the flex items inside the container.

In case we are a selector for Item Number 10 and said the flex to one.

You can see Item Number 10 is occupying its maximum space in the line.

Now if you shrink the browser size, then the flex wrap property will wrap the flex items more and more to ensure that all the flex items fit into the container.

And once again, this is going to be extremely useful for the responsive design, then we have less amount of space in the screen.

Now let me increase the height of the container here and show you guys what will happen.

And we let's set this to 600 pixels and see what happens.

So here we still have two rows.

But why do we have this empty space in between.

That's because of the Align content property which we haven't discussed yet.

That's again a flex container property.

So let's create it align content property into the container selector and set it to flex start.

Now as you can see, every row in a flex container is at the top of the container.

Therefore the Align content property aligns the row in the cross axis into the container.

Again, we can use the same values for the alencon in property as we use for the island items and the islands of property.

Here, I want you guys to pause the video and analyze the difference between the Align items align itself in the LM content properties.

Now let's set the LM content center.

So as you can see, a rows are aligned at the center of the container.

We can also change the flex end.

And yes, the rows are at the end of the container.

Then let's see the space around On space between and finally the space evenly.

So the old walk in the same logic, as you see, these properties will take some time for you to memorize.

But you don't have to really worry about it because From now on, the only going to use the Flexbox in our main project.

Kudos to everyone.

We have mastered the concept of Flexbox.

Let's not waste any more time.

We have got a beautiful app to be constructed inside our website.

So it mitigates in the next section, where we'll be reconstructing a navbar and the hero section, and then we'll move on to our app.

Table of Contents ->

• How to Use Flexbox to
  • center anything horizontally
  • center anything vertically
  • center both horizontally & Vertically
• How to Use Grid to
  • center anything horizontally
  • center anything vertically
  • center both horizontally & Vertically
• The Transform & position property
• The Margin Property
• Additional resources
• Conclusion

Methods

You can watch this tutorial on YouTube as well if you like:

But.... Wait A Minute!

First of all, let's understand:

• Main Axis
• Cross Axis

What is the Main Axis in CSS?

You can also call it the:

• X-Axis
• Main Axis
• Horizontal Line

The line from left to right is the Main-Axis.

Main Axis

What is the Cross Axis in CSS?

You can also call it the:

• Y-Axis
• Cross Axis
• Vertical Line

The line from top to bottom is the Cross-Axis.

Cross Axis

Project Setup

To experiment with all the properties and values, write the following code in your code editor.

HTML

Write this code inside the body tag:

<div class="container">

   <div class="box-1"> </div>

</div>

CSS

Clear the default browser styles so that we can work more accurately:

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

Select the .container class and set it to 100vh. Otherwise, we can't see our result on the Vertical Axis:

.container{
   height: 100vh;
}

Style the .box-1 class like this:

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

We're all set, now let's start coding!

How to use Flexbox to center anything

We can use Flexbox to align our content div both along the X and Y Axis. To do that, we need to write the display: flex; property inside the .container class:

.container{
   display: flex;

   height: 100vh;
}

We'll experiment with these 2 properties:

• justify-content
• align-items

How to center anything horizontally using Flexbox

We can use the justify-content property to do this using these values 👇

values of flexbox justify-content property

To experiment with the values, write the following code👇

.container{
   display: flex;
   height: 100vh;

 /* Change values to  👇 experiment*/
   justify-content: center;
}

The result will look like this👇

result of justify-content flexbox

How to center anything vertically using Flexbox

We can use the align-items property to do this using these values 👇

values of Flexbox align-items property

To experiment with the values, write the following code👇

.container{
   height: 100vh;
   display: flex;

 /* Change values 👇 to experiment*/
   align-items: center;
}

The result looks like this👇

Result of align-items flexbox

How to center a div horizontally & vertically using Flexbox

Here, we can combine both the justify-content and align-items properties to align a div both horizontally and vertically.

Write the following codes👇

.container{
   height: 100vh;
   display: flex;

/* Change values 👇 to experiment*/
   align-items: center;
   justify-content: center;
}

The result looks like this 👇

Centering a div Horizontally & vertically