Introduction to Flexbox

Flexbox is a CSS layout module that makes designing responsive websites easy. It allows you to align and distribute space among items in a container.

Flex Container

Set a parent element as flex container:

.container {
  display: flex;
}

Flex Properties

• justify-content – aligns items horizontally
• align-items – aligns items vertically
• flex-wrap – controls wrapping of items
• gap – spacing between items

Example

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

Flexbox is very useful for navbars, card layouts, and grids. Practice by creating small projects to get familiar with its properties.

Conclusion

Flexbox simplifies responsive design and helps make websites professional and mobile-friendly. It is essential for modern web development.