Duncan Ndegwa

Posted on Feb 27

CSS Flexbox

#html #css #webdev #beginners

Introduction to CSS Flexbox

Flexbox (Flexible Box Layout) is a CSS layout model designed to arrange elements in a single row or column efficiently.

It helps with:

Aligning items horizontally and vertically
Distributing space between items
Creating responsive layouts
Handling dynamic content sizes

Flexbox works best for one-dimensional layouts (row OR column).

Prerequisites

To follow along with this tutorial it is assumed that you have a basic knowledge of HTML.

Install a text editor such as Vs Code, Sublime text, notepad, or any other text editor you are comfortable with.

Basic Terminology

Before using Flexbox, understand these key terms:

Flex Container – The parent element that holds flex items
Flex Items – The children inside the flex container
Main Axis – The primary direction (row or column)
Cross Axis – The perpendicular direction to the main axis

Creating a Flex Container

A flexbox always consists of:

A Flex Container - The parent (container) element, where the display property is set to flex or inline-flex
One or more Flex Items - The direct children of the flex container automatically becomes flex items

<html>
<head>
<style>
.container {
  display: flex;
  background-color: DodgerBlue;
}

.container div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

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

</body>
</html>

CSS Flex Container Properties

The flex container element can have the following properties:

display - Must be set to flex or inline-flex
flex-direction - Sets the display-direction of flex items
flex-wrap - Specifies whether the flex items should wrap or not
flex-flow - Shorthand property for flex-direction and flex-wrap
justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally)
align-items - Aligns the flex items when they do not use all available space on the cross-axis (vertically)
align-content - Aligns the flex lines when there is extra space in the cross axis and flex items wrap

CSS flex-direction Property

The flex-direction property specifies the display-direction of flex items in the flex container.
This property can have one of the following values:

row (default)
column
row-reverse
column-reverse

Example

The column value displays the flex items vertically (from top to bottom):

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

.container div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  padding: 10px;
  text-align: center;  
  font-size: 30px;
}
</style>
</head>
<body>

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

</body>
</html>

CSS flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.

This property can have one of the following values:

nowrap (default)
wrap
wrap-reverse ### Example The wrap value specifies that the flex items will wrap if necessary:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

.container div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  padding: 10px;
  text-align: center;  
  font-size: 30px;
}
</style>
</head>
<body>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
</div>

</body>
</html>

Result

Conclusion

In this article, we learned that Flexbox is a one-dimensional CSS layout system used to arrange items in rows or columns.
We understood the difference between a flex container and flex items.
We explored properties like flex-direction and flex-wrap.
Flexbox makes alignment and responsive design much easier.

DEV Community