Understanding Flexbox in CSS

Hello, developers!

In today's post, we'll dive into Flexbox, a powerful CSS layout module that helps you design responsive layouts with ease. Whether you're just getting started with web development or looking to improve your CSS skills, understanding Flexbox will give you better control over your layout.

What is Flexbox?

Flexbox, short for Flexible Box Layout, is designed to distribute space along an axis (either horizontally or vertically). It’s perfect for building responsive UIs without using float or positioning hacks.

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

Flexbox Properties Here are a few key properties you’ll need:

display: flex;: Turns an element into a flex container. justify-content: Aligns items horizontally within the container. align-items: Aligns items vertically within the container. flex-direction: Defines the direction of the main axis (row or column). Example

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
 
<style>
  .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    text-align: center;
    line-height: 100px;
  }
</style>

By using Flexbox, you can easily center and distribute elements within a container. Play around with these properties to see how they affect the layout!

Happy coding!