CSS flex-direction Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 24 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The flex-direction property in CSS is a crucial part of the Flexible Box Layout Module, commonly known as Flexbox.

This property specifies the direction in which the flex container's children (the flex items) are placed. It allows developers to control the flow of items in a container, making it easier to design responsive and flexible layouts.

💡 Syntax

The syntax for the flex-direction property is as follows:

Syntax

Copied

container {
  flex-direction: direction;
}

Here, direction can be one of the following values:

row
row-reverse
column
column-reverse

🎛️ Default Value

The default value of the flex-direction property is row, which means the flex items are laid out in a horizontal direction, from left to right.

🏠 Property Values

Value	Description
row	Lays out the flex items horizontally, from left to right.
row-reverse	Lays out the flex items horizontally, from right to left.
column	Lays out the flex items vertically, from top to bottom.
column-reverse	Lays out the flex items vertically, from bottom to top.

📄 Example

In this example, we'll use the flex-direction property to arrange items in a row.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS flex-direction Example</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      background-color: lightgray;
    }
    .item {
      padding: 20px;
      background-color: steelblue;
      margin: 10px;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Flex Direction: Row</h1>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The flex-direction property is well-supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is safe to use for production websites, but it's always a good practice to test your layouts across different browsers to ensure compatibility.

🎉 Conclusion

The flex-direction property is a fundamental aspect of Flexbox, offering a simple way to control the layout direction of items within a flex container.

By understanding and utilizing this property, you can create responsive and flexible designs that adapt to various screen sizes and orientations. Experiment with different values to see how they affect the layout of your flex items and enhance your web design projects.