Learn CSS Flexbox (Flexible Box Layout)

CSS Flexbox (Flexible Box Layout) is a powerful layout model that allows you to create flexible and responsive layouts in a more efficient way. It involves using a set of properties on a parent container to control the positioning and sizing of its child elements. Here's a step-by-step guide to help you understand the basics of CSS Flexbox:

• Flex Container (Parent): To create a flex layout, you first need to designate a container as a flex container using the `display` property with the value `flex` or `inline-flex`.

.flex-container {

  display: flex;

}

• Flex Direction: The `flex-direction` property determines the direction of the main axis, along which flex items will be laid out. It can take one of the following values:

   - `row`: Items are laid out horizontally in a row (default).

   - `row-reverse`: Items are laid out horizontally in reverse order.

   - `column`: Items are laid out vertically in a column.

   - `column-reverse`: Items are laid out vertically in reverse order.

.flex-container {

   display: flex;

   flex-direction: row; /* or column, row-reverse, column-reverse */

}

• Flex Wrap: The `flex-wrap` property controls whether the flex items should wrap onto multiple lines or stay on a single line.

   - `nowrap`: Items are on a single line (default).

   - `wrap`: Items wrap onto multiple lines if needed.

   - `wrap-reverse`: Items wrap onto multiple lines in reverse order.

.flex-container {

   display: flex;

   flex-wrap: wrap; /* or nowrap, wrap-reverse */

}

• Justify Content: The `justify-content` property aligns flex items along the main axis. It controls how extra space in the container is distributed.

   - `flex-start`: Items are aligned at the start of the main axis (default).

   - `flex-end`: Items are aligned at the end of the main axis.

   - `center`: Items are centered along the main axis.

   - `space-between`: Items are evenly distributed with equal space between them.

   - `space-around`: Items are evenly distributed with equal space around them.

.flex-container {

   display: flex;

   justify-content: center; /* or flex-start, flex-end, space-between, space-around */

}

• Align Items and Align Content: These properties control alignment along the cross axis (perpendicular to the main axis) and are particularly useful when the items have varying heights.

   - `align-items`: Aligns items along the cross axis within a single line.

   - `align-content`: Aligns lines along the cross axis within the flex container when there are multiple lines.

 .flex-container {

   display: flex;

   align-items: center; /* or flex-start, flex-end, baseline, stretch */

   align-content: center; /* or flex-start, flex-end, space-between, space-around, stretch */

}

• Flex Items (Children): Flex items within a flex container automatically adapt to the available space according to the flex container's properties. You can also use individual properties on flex items for more precise control.

.flex-item {

   flex: 1; /* Flex-grow, flex-shrink, flex-basis combined shorthand */

   /* Other properties for individual items */

}

This is just a basic overview of CSS Flexbox. As you delve deeper, you'll discover more advanced techniques and properties that can help you create complex and responsive layouts efficiently.