CSS Flexbox

🧰 Flexbox Basics

To begin using Flexbox, set the container element to display: flex or display: inline-flex to create a flex container.

.container {
  display: flex;
}

• display: flex: This will set up a block-level flex container.
• display: inline-flex: This sets up an inline-level flex container.

In both cases, all the direct child elements become flex items.

📏 Main Axis vs Cross Axis

Flexbox layout is based on two axes:

• Main Axis: The main axis is the primary axis along which flex items are placed. It can either be horizontal (default) or vertical.

  • By default, the main axis is horizontal, and elements are placed from left to right.

• Cross Axis: The cross axis is perpendicular to the main axis. If the main axis is horizontal, the cross axis is vertical (and vice versa).

For example, in a row-based layout (flex-direction: row), the main axis runs horizontally, while the cross axis runs vertically.

🔑 Flex Properties

Flexbox offers several key properties to control the alignment and distribution of flex items:

.container {
  display: flex;
  justify-content: space-between; /* Space items evenly with space between them */
}

🚀 Flex Shortcuts

Flexbox also has three shorthand properties for managing the distribution of space among flex items:

• flex-grow: Defines how much an item will grow relative to other items. A value of 1 means the item will take up available space equally.

• flex-shrink: Defines how much an item will shrink when there's not enough space. A value of 1 means the item can shrink if necessary.

• flex-basis: Defines the default size of an item before any remaining space is distributed.

Example: Using flex-grow, flex-shrink, and flex-basis

.item {
  flex-grow: 2; /* This item will grow twice as much as others */
  flex-shrink: 1; /* This item will shrink if necessary */
  flex-basis: 100px; /* The base size of this item is 100px */
}

This means:

• The item starts with a base size of 100px.
• It can grow to take up more space if there is any available.
• It can shrink to fit if there's not enough space.

🎯 Centering Example

One of the most common use cases for Flexbox is centering content both horizontally and vertically.

Example: Centering with justify-content and align-items

.container {
  display: flex;
  justify-content: center; /* Aligns items horizontally */
  align-items: center; /* Aligns items vertically */
}

This will center all the items inside the container both horizontally and vertically.

🧪 Try Yourself

export default function App() {
  return <h1>Hello world</h1>
}

In this example, the content will be centered within the container.

Key Points:

• Flexbox makes it easy to align and distribute space among items within a container.
• Use display: flex on the parent container to enable Flexbox.
• The main and cross axes control the layout direction and alignment.
• Flex properties such as justify-content, align-items, and flex-wrap help control the distribution and wrapping of items.
• Flexbox offers shortcuts like flex-grow, flex-shrink, and flex-basis to efficiently manage space in a flex container.
• Centering content with Flexbox is simple and commonly used in responsive layouts.

Flexbox provides a flexible and powerful way to design responsive web layouts, offering fine control over alignment and distribution of space within containers.