CSS layouts and flexbox introduction simple tutorial

Understanding the basics of Flexbox, a powerful CSS layout tool used to create responsive and flexible layouts. how to use Flexbox properties to align, distribute, and order elements on a webpage.

Introduction to Flexbox

What is Flexbox?

• Flexbox (Flexible Box Layout) is a CSS layout model that allows you to arrange elements in rows or columns, distribute space, and align items.
• It simplifies creating flexible, responsive designs compared to using floats or manually setting margins.

How Flexbox Works

• To use Flexbox, you need to set a container’s display property to flex, making the container a flex container, and its direct children become flex items.

Basic Flexbox Terms

• Main Axis: The primary axis along which the flex items are laid out (can be horizontal or vertical).
• Cross Axis: The axis perpendicular to the main axis.

Explanation

• The .container is set to display: flex, making it a flex container.
• Each .item becomes a flex item. The flex: 1; property makes the items grow equally to fill the available space.

Flexbox Properties for Containers

1. flex-direction
   • Specifies the direction of the flex items (row or column).
   • Values: row (default), column, row-reverse, column-reverse.
2. justify-content
   • Aligns flex items along the main axis (horizontally by default).
   • Values: flex-start (default), center, flex-end, space-between, space-around.
3. align-items
   • Aligns flex items along the cross axis (vertically by default).
   • Values: stretch (default), center, flex-start, flex-end.
4. flex-wrap
   • Allows flex items to wrap onto multiple lines.
   • Values: nowrap (default), wrap, wrap-reverse.

Explanation

• flex-direction: row; arranges the flex items horizontally.
• justify-content: space-between; distributes space between the items, ensuring equal space between them.
• align-items: center; aligns the items vertically in the middle of the container.

Flexbox Properties for Flex Items

1. flex-grow
   • Controls how much the flex item grows relative to the others.
   • Values: Any number (default is 0, meaning no growth).
2. flex-shrink
   • Controls how much the flex item shrinks relative to the others.
   • Values: Any number (default is 1, meaning items shrink as needed).
3. flex-basis
   • Defines the default size of the flex item before any growing or shrinking.
   • Values: Can be a length (e.g., 100px) or percentage.
4. order
   • Specifies the order of the flex items. Lower numbers appear first.
   • Values: Any number (default is 0).

Explanation

• flex-grow: 2; makes the item grow twice as fast as other items with flex-grow: 1.
• flex-basis: 100px; sets the initial size of the item to 100px before applying growth or shrink.

Tutorial Ended

If you have any question want to ask please feel free to contact us or comment below.