CSS Flexbox Basics

This repository is covering the basics of how to use Flexbox to layout and align elements in a web page.

Understanding Flexbox

Flexbox is a CSS layout module that allows you to easily create flexible and responsive layouts. With Flexbox, you can align and distribute elements in a container along a single axis or multiple axes.

Some of the key concepts in Flexbox include:

• Flex container: The container element that holds the flex items.
• Flex item: The child elements of the flex container.
• Main axis: The primary axis along which flex items are laid out.
• Cross axis: The perpendicular axis to the main axis.

Basic Flexbox Properties

Here are some of the most commonly used Flexbox properties:

• display: flex: Turns an element into a Flexbox container.
• flex-direction: Specifies the direction of the main axis.
• justify-content: Specifies how Flexbox items are aligned along the main axis.
• align-items: Specifies how Flexbox items are aligned along the cross axis.
• flex-wrap: Specifies whether Flexbox items should wrap or not.

Examples

The repository includes example of how to use Flexbox and how it is different from Grid to create different layouts. You can check out the example in the flex.html.