start learning
Image 1
2788945568

CSS Flexbox
Flexible and Responsive Layouts

CSS Flexbox is a powerful layout module that provides a flexible and efficient way to create responsive web layouts. It introduces a one-dimensional layout system that enables easy alignment and distribution of elements within a container.


CSS Flexbox simplifies the creation of responsive layouts by automatically handling element positioning, distribution, and alignment. It provides a flexible and intuitive approach to building dynamic and adaptable web designs without relying heavily on manual calculations and complex CSS rules.


Basic Flex Container and Items

Use our free live html editor to test the code


<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

.flex-container {
  display: flex;
}

.flex-item {
  background-color: lightblue;
  margin: 10px;
  padding: 20px;
}

Preview :
Item 1
Item 2
Item 3

Flex Direction and Justify Content

Use our free live html editor to test the code


<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

.flex-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 300px;
  }

  .flex-item {
    background-color: lightblue;
    margin: 10px;
    padding: 20px;
  }

Preview :
Item 1
Item 2
Item 3

Flex Wrap and Align Items

Use our free live html editor to test the code


<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

 .flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 200px;
  }

  .flex-item {
    background-color: lightblue;
    margin: 10px;
    padding: 20px;
  }

Preview :
Item 1
Item 2
Item 3

These examples illustrate the basic usage of CSS Flexbox to create flexible and responsive layouts. Remember that Flexbox provides a wide range of properties and options for more advanced layouts and customization.

×