CSS Flex Direction

The 'flex-direction' property in CSS (Cascading Style Sheets) regulates how things are arranged inside a flex container. The Flexible Box Layout, often called Flexbox, is a dynamic layout approach that enables you to distribute and align information within a container effectively.

Example

Here is an illustration of how to employ CSS's 'flex-direction' property:

.flex-container {
  display: flex;
  flex-direction: row; /* or row-reverse, column, column-reverse */
}

The '.flex-container' in this illustration is configured as a flex display, and you can modify the value of the 'flex-direction' property to control the layout of its subsidiary items. Subsidiary or flex items will adhere to the container's set layout direction.

Flexbox is particularly helpful for designing responsive layouts and consistently aligning information. Web developers may construct a broad range of designs by modifying the "flex-direction" and other flex parameters without mainly depending on floats or positioning.

Values of Flex Direction

The flex container's main axis and cross axis are determined by the 'flex-direction' property, which accepts a range of values. These values are:

"Row" (default): This is the first possible value. Items are arranged horizontally, from left to right. The cross-axis runs vertically, whereas the main axis is horizontal.
"Row-reverse": This option is similar to "row," but it flips the order of the items so they are arranged on the main axis from right to left. Use this property to move in the opposite direction as the text. It creates flex elements in the exact opposite way of the text.
"Column": It indicates that the object has a usual top-to-bottom orientation. It causes the object to move normally from top to bottom.
"Column-reverse": Similar to "column," but the arrangement of the components is reversed, arranging the row as a column from bottom to top. It's utilized to indicate that the object has a typical bottom-to-top orientation. It causes the object to move normally from bottom to top.

Using "Row-reserve" Value

Let's take an example to demonstrate the usage of row-reverse value.

See this example:

Backward Skip 10sPlay VideoForward Skip 10s

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.flex-container {  
    display: -webkit-flex;  
    display: flex;  
    -webkit-flex-direction: row-reverse;  
    flex-direction: row-reverse;  
    width: 400px;  
    height: 200px;  
    background-color: lightpink;  
}  
.flex-item {  
    background-color: brown;  
    width: 100px;  
    height: 100px;  
    margin: 10px;  
}  
</style>  
</head>  
<body>  
<div class="flex-container">  
  <div class="flex-item">flex item 1</div>  
  <div class="flex-item">flex item 2</div>  
  <div class="flex-item">flex item 3</div>  
</div>  
</body>  
</html>  

Using a "column" Value

Let's take an example to demonstrate the usage of column value.

See this example:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 200px;
    background-color: lightpink;
}
.flex-item {
    background-color: brown;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

Using a "Column-reserve" Value

Let's take an example to demonstrate the usage of column-reserve value.

See this example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.flex-container {  
    display: -webkit-flex;  
    display: flex;  
    -webkit-flex-direction: column-reverse;  
    flex-direction: column-reverse;  
    width: 400px;  
    height: 200px;  
    background-color: lightpink;  
}  
.flex-item {  
    background-color: brown;  
    width: 100px;  
    height: 100px;  
    margin: 10px;  
}  
</style>  
</head>  
<body>  
<div class="flex-container">  
  <div class="flex-item">flex item 1</div>  
  <div class="flex-item">flex item 2</div>  
  <div class="flex-item">flex item 3</div>  
</div>  
</body>  
</html> 

What is a Flex Container?

A flex container is similar to a box that may contain other boxes (components). Imagine it as a parent box that flexibly organizes and arranges its child boxes, facilitating the development of web page layouts.

Here are the main ideas regarding a flexible container in an understandable way:

Parent Box: The flex container you develop in your web design resembles a large box.
Organizer: It functions similarly to a tidy organizer and aids in organizing the smaller objects (child components) within the parent box.
Flexible Layout: Your web page layout is flexible and adaptive since you can quickly modify how the child elements are placed.
Main Axis: Items are arranged along a primary direction (horizontal or vertical) on this axis.
Cross Axis: Items can be arranged in a direction that is perpendicular to the main axis.
Simple Design: Eliminating the need to deal with complicated positions makes building web layouts easier and more responsive.
Control: You may use CSS attributes to modify how things expand, contract, and align within the flex container.

In conclusion, a flex container is a useful tool in web design that makes it simpler to develop contemporary and adaptable web layouts by allowing you to organize and arrange things in a flexible and controlled way.

Next TopicCSS vs SCSS

← prev next →