Css Flex Direction

CSS flex direction

Created By: chatGPT

CSS Flexbox is a layout model that provides an easier and more efficient way to arrange and align elements in a container. The flex-direction property is crucial in determining the direction in which the flex items are placed in the flex container.

display: flex;
flex-direction: row;  /* Default direction, items are added horizontally */

flex-direction: row-reverse;  /* Items are added horizontally, but in reverse order */

flex-direction: column;  /* Items are added vertically, from top to bottom */

flex-direction: column-reverse;  /* Items are added vertically, but in reverse order */

The four values of flex-direction allow for flexibility in layout: row, row-reverse, column, and column-reverse. By applying this property, you can quickly adapt your design to various screen sizes and orientations.

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

.item {
    margin: 10px;
}

To illustrate how flex-direction affects the layout, consider the following example. Here, we will create a simple flex container with several items, applying different flex-direction values to see their effects visually.

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

<style>
.container {
    display: flex;
    flex-direction: row;
}

.item {
    padding: 20px;
    background-color: lightcoral;
    border: 1px solid #999;
}
</style>

You can change the flex-direction property to column to observe how the items stack vertically instead. This shows the versatility of the Flexbox model.

<style>
.container {
    display: flex;
    flex-direction: column;
}
</style>