Flexbox

Flex container and flex items
Flex properties (justify-content, align-items, flex-wrap, etc.)
Creating responsive layouts with Flexbox

Flexbox in CSS

Flexbox, or the Flexible Box Layout, is a powerful CSS module designed to make it easier to design flexible and responsive layouts. It provides a way to align and distribute space among items in a container, even when their size is unknown or dynamic. Flexbox is particularly useful for creating complex layouts without relying heavily on float-based or grid-based methods.

1. Flex Container and Flex Items

The foundation of Flexbox is the concept of a flex container and its flex items.

a. Flex Container

A flex container is an element that holds one or more flex items. To create a flex container, you apply the display: flex or display: inline-flex property to a parent element.

display: flex: The container becomes a block-level flex container (occupies the full width available).
display: inline-flex: The container becomes an inline-level flex container (occupies only as much width as its content).

Example:

.container {
  display: flex;
}

This turns .container into a flex container, with its child elements becoming flex items.

b. Flex Items

Flex items are the direct children of a flex container. These items will be laid out and aligned according to the flex properties you set on the container and items themselves.

Example:

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

Here, each .item element is a flex item within the .container.

2. Flex Properties

Flexbox introduces several properties that you can apply to the flex container and flex items to control their layout. These properties manage alignment, spacing, and the overall distribution of flex items within the container.

a. Properties for the Flex Container

flex-direction: Defines the main axis (the direction in which flex items are laid out).

row (default): Flex items are laid out in a row (left to right).
row-reverse: Flex items are laid out in a row but in reverse order (right to left).
column: Flex items are laid out in a column (top to bottom).
column-reverse: Flex items are laid out in a column but in reverse order (bottom to top).

Example:

.container {
  display: flex;
  flex-direction: row; /* Flex items are arranged in a row */
}

justify-content: Aligns flex items along the main axis (horizontal by default).

flex-start (default): Items are packed toward the start of the main axis.
flex-end: Items are packed toward the end of the main axis.
center: Items are centered along the main axis.
space-between: Items are evenly distributed with the first item at the start and the last item at the end.
space-around: Items are evenly distributed with equal space around them.
space-evenly: Items are even ly distributed with equal space between and around them.

Example:

.container {
  display: flex;
  justify-content: space-between; /* Items spread out with equal space between them */
}

align-items: Aligns flex items along the cross axis (vertical by default when flex-direction is row).

stretch (default): Items stretch to fill the container.
flex-start: Items are aligned to the start of the cross axis.
flex-end: Items are aligned to the end of the cross axis.
center: Items are centered along the cross axis.
baseline: Items are aligned so that their baselines align.

Example:

.container {
  display: flex;
  align-items: center; /* Items are vertically centered */
}

align-content: Aligns rows of flex items when there is extra space in the cross axis (applies only if flex items wrap to multiple lines).

stretch (default): Lines stretch to take up the remaining space.
flex-start: Lines are packed toward the start of the cross axis.
flex-end: Lines are packed toward the end of the cross axis.
center: Lines are centered along the cross axis.
space-between: Lines are evenly distributed with the first line at the start and the last line at the end.
space-around: Lines are evenly distributed with equal space around them.

Example:

.container {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  align-content: space-between; /* Lines are evenly spaced with the first and last lines at the start and end */
}

flex-wrap: Controls whether flex items wrap onto multiple lines.

nowrap (default): All items are on one line.
wrap: Items wrap onto multiple lines, from top to bottom.
wrap-reverse: Items wrap onto multiple lines, from bottom to top.

Example:

.container {
  display: flex;
  flex-wrap: wrap; /* Items wrap to the next line if necessary */
}

flex-flow: A shorthand property for setting both flex-direction and flex-wrap in a single declaration.

Syntax: flex-flow: <flex-direction> <flex-wrap>;

Example:

.container {
  display: flex;
  flex-flow: row wrap; /* Items are arranged in a row and can wrap */
}

b. Properties for Flex Items

order: Controls the order of the flex items. The default value is 0. Negative and positive integers can be used to move items around.

Example:

.item {
    order: 2; /* This item will appear after items with lower order values */
}
     ```

2. **`flex-grow`:** Defines how much the flex item should grow relative to the rest of the flex items when there is extra space.
- **Example:**
```css
.item {
    flex-grow: 2; /* This item will grow twice as much as items with flex-grow: 1 */
}
     ```

3. **`flex-shrink`:** Defines how much the flex item should shrink relative to the rest of the flex items when there is not enough space.
- **Example:**
```css
.item {
    flex-shrink: 0; /* This item will not shrink even if there's not enough space */
}
     ```

4. **`flex-basis`:** Defines the default size of the flex item before any space distribution. It can be set in any CSS unit (e.g., `px`, `%`, `em`, etc.).
- **Example:**
```css
.item {
    flex-basis: 200px; /* This item will have a base width of 200px */
}
     ```

5. **`flex`:** A shorthand property for setting `flex-grow`, `flex-shrink`, and `flex-basis` together.
- **Syntax:** `flex: <flex-grow> <flex-shrink> <flex-basis>;`
- **Example:**
```css
.item {
    flex: 1 0 150px; /* The item can grow (flex-grow: 1), won't shrink (flex-shrink: 0), and has a base width of 150px */
}
     ```

6. **`align-self`:** Allows individual flex items to be aligned independently of the other items along the cross axis.
- **Example:**
```css
.item {
    align-self: flex-end; /* This item aligns itself to the end of the container */
}
     ```

---

### **3. Creating Responsive Layouts with Flexbox**

One of the strengths of Flexbox is its ability to create responsive layouts with minimal effort. Flexbox allows for flexible item widths, wrapping, and alignment that adapt to different screen sizes.

#### **a. Basic Responsive Layout Example**

Let's create a basic responsive layout with a header, main content area, and a sidebar.

**HTML:**
```html
<div class="container">
    <header class="header">Header</header>
    <div class="main">Main Content</div>
    <aside class="sidebar">Sidebar</aside>
    <footer class="footer">Footer</footer>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Full viewport height */
}

.header,
.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1em;
}

.main {
  flex: 1; /* Main content takes up the remaining space */
  background-color: #f4f4f4;
  padding: 1em;
}