CSS Flexbox

What is Flexbox?

Flexbox is a layout model in CSS3 designed for alignment and distribution of elements within a container, even when their sizes are dynamic.

Key Concepts

Here are the essential Flexbox properties and their usage:

1. `display: flex`

Enables Flexbox for a container.

.flex-container {
    display: flex;
}
                    

2. `flex-direction`

Defines the direction of the main axis.

.flex-container {
    flex-direction: column;
}
                    

3. `justify-content`

Aligns items along the main axis.

.flex-container {
    justify-content: space-between;
}
                    

4. `flex-direction`

Specifies the direction of the flex items in the container.

.flex-container {
    flex-direction: column;
}
    

5. `justify-content`

Defines the alignment along the main axis of the flex container.

.flex-container {
    justify-content: space-between;
}
    

6. `align-items`

Aligns flex items along the cross axis.

.flex-container {
    align-items: center;
}
    

7. `align-self`

Overrides the `align-items` property for a single item.

.flex-item {
    align-self: flex-end;
}
    

8. `flex-wrap`

Specifies whether items should wrap onto the next line when there's insufficient space.

.flex-container {
    flex-wrap: wrap;
}
    

9. `flex-grow`

Specifies how much a flex item will grow relative to others.

.flex-item {
    flex-grow: 2;
}
    

10. `flex-shrink`

Specifies how much a flex item will shrink relative to others when there's not enough space.

.flex-item {
    flex-shrink: 0;
}
    

11. `flex-basis`

Specifies the initial size of a flex item before it's adjusted by flex-grow or flex-shrink.

.flex-item {
    flex-basis: 100px;
}
    

12. Combining Flex Properties

The shorthand property `flex` combines `flex-grow`, `flex-shrink`, and `flex-basis`.

.flex-item {
    flex: 1 1 150px;
}
    

13. `order`

Controls the order of items in the flex container, overriding the source order.

.flex-item {
    order: 2;
}
            

14. Centering Elements

Flexbox makes it easy to center items both vertically and horizontally.

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
            

15. Equal Spacing with `justify-content`

Distributes items with equal spacing using properties like `space-between` or `space-around`.

.flex-container {
    justify-content: space-around;
}
            

16. Fixed and Flexible Widths

Flexbox allows combining fixed and flexible widths for a responsive layout.

.flex-container {
    display: flex;
}
.flex-item-fixed {
    width: 200px;
}
.flex-item-flexible {
    flex: 1;
}
            

17. Alignment Tricks with `align-content`

Control spacing between rows when `flex-wrap` is enabled.

.flex-container {
    flex-wrap: wrap;
    align-content: stretch;
}
            

18. Responsive Flexbox

Flexbox makes creating responsive designs simple by adjusting layout dynamically based on screen size.

.flex-container {
    display: flex;
    flex-wrap: wrap;
}
.flex-item {
    flex: 1 1 200px; /* Flexible items with a minimum width of 200px */
}
            

19. Cross-Browser Support

Use prefixes for older browsers like `-webkit-` to ensure compatibility.

.flex-container {
    display: -webkit-flex; /* Safari */
    display: flex;
}
            

20. Real-World Use Cases

Flexbox is ideal for creating navigation bars, image galleries, and other dynamic layouts.

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}