---
title: "CSS – Flex"
url: https://khanwaseem.com/blog/course/css-flex
author: "khan Waseem"
published: 2023-09-19
updated: 2023-09-19
topics: ["course", "CSS Tutorial"]
description: "Explore insightful articles on technology, design, and coding. Stay updated with the latest web development trends and unleash your creative potential."
---
# CSS – Flex
In CSS, “Flex” refers to “Flexbox,” which is short for “Flexible Box Layout.” Flexbox is a layout model that provides a flexible and efficient way to arrange and distribute space among items within a container, even when the sizes of those items are unknown or dynamic. It was introduced to simplify the design of complex layouts in web development.
With Flexbox, you can create both simple and intricate layouts, such as navigation menus, equal-height columns, or centered content, with relative ease. It offers a predictable way to control the alignment and positioning of elements, making it a valuable tool for responsive web design.
The key components of Flexbox include the use of a “flex container” and “flex items.” A flex container is an HTML element that becomes a parent for the elements you want to lay out in a flexible manner. Flex items are the child elements within the flex container that are arranged based on the rules defined by the container.
Flexbox properties, like `display: flex;`, `flex-direction`, `justify-content`, `align-items`, and others, allow you to control the flow, alignment, and distribution of space along the main and cross axes within the flex container.
It allows you to distribute space and align content within a container, even when the size of your items is unknown or dynamic. Here’s an explanation of CSS Flexbox:
**1. `display: flex;`**
- Example:
```css
.flex-container {
display: flex;
}Code language: CSS (css)
```
The `display: flex;` property is applied to a container element to create a flex container. It enables the flex layout model for the children of that container.
**2. `flex-direction`**
- Example:
```css
.flex-container {
display: flex;
flex-direction: row;
}Code language: CSS (css)
```
The `flex-direction` property defines the main axis along which flex items will be placed within the container. It can be set to values like `row`, `row-reverse`, `column`, or `column-reverse` to control the direction of items.
**3. `justify-content`**
- Example:
```css
.flex-container {
display: flex;
justify-content: space-between;
}Code language: CSS (css)
```
`justify-content` determines how extra space is distributed along the main axis. It can be set to values like `flex-start`, `flex-end`, `center`, `space-between`, or `space-around`.
**4. `align-items`**
- Example:
```css
.flex-container {
display: flex;
align-items: center;
}Code language: CSS (css)
```
`align-items` controls how items are aligned along the cross-axis (perpendicular to the main axis). You can use values like `flex-start`, `flex-end`, `center`, `baseline`, or `stretch`.
**5. `flex-wrap`**
- Example:
```css
.flex-container {
display: flex;
flex-wrap: wrap;
}Code language: CSS (css)
```
The `flex-wrap` property determines whether flex items should wrap to the next line if they overflow the container. It can be set to `nowrap`, `wrap`, or `wrap-reverse`.
**6. `flex-grow`, `flex-shrink`, and `flex-basis`**
- Example:
```css
.flex-item {
flex: 1 0 auto;
}Code language: CSS (css)
```
The `flex` shorthand property combines `flex-grow`, `flex-shrink`, and `flex-basis`. It allows you to specify how a flex item should grow, shrink, and its initial size.
**7. `order`**
- Example:
```css
.flex-item:nth-child(2) {
order: 1;
}Code language: CSS (css)
```
The `order` property controls the order in which flex items are displayed within the container. Lower values place items earlier in the order.
**8. `align-self`**
- Example:
```css
.flex-item:nth-child(2) {
align-self: flex-end;
}Code language: CSS (css)
```
`align-self` allows you to override the `align-items` property for individual flex items, customizing their alignment along the cross-axis.
CSS Flexbox simplifies the creation of complex layouts and makes it easier to build responsive designs. It’s especially useful for arranging items within a container when the number of items and their sizes are not fixed.
In summary, Flex in CSS, or Flexbox, is a layout model designed to simplify the creation of responsive and flexible web layouts. It provides a powerful way to manage the arrangement and positioning of elements, enabling web developers to achieve a wide range of design goals with less complex code.
**Example : **
```xml
CSS Flex Property Example
Flex Item 1
Flex Item 2
Flex Item 3
Code language: HTML, XML (xml)
```
**Output : **
**In this example:**
- We have a basic HTML document with a heading (``).
- Inside the `