CSS Flexbox
Flexible and Responsive Layouts

• Flex Container : The parent element that contains flex items. It is defined by setting the display property to flex or inline-flex.
• Flex Items : The child elements within the flex container. They automatically adjust their size and position based on the flex container's rules.
• Main Axis and Cross Axis : The main axis represents the primary direction along which flex items are laid out, either horizontally (row) or vertically (column). The cross axis is perpendicular to the main axis.
• Flex Direction : Determines the direction of the main axis within the flex container. It can be set to row (left to right), row-reverse (right to left), column (top to bottom), or column-reverse (bottom to top).
• Justify Content : Defines how flex items are aligned along the main axis. It controls spacing between and around the flex items.
• Align Items : Specifies how flex items are aligned along the cross axis. It defines the default behavior for item alignment within the flex container.
• Flex Wrap : Determines whether flex items should wrap to multiple lines if they exceed the width of the flex container.
• Flex Grow, Flex Shrink, and Flex Basis : These properties control how flex items grow, shrink, and establish their initial size within the flex 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.

Use our free live html editor to test the code

Edit Copy Hide

<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>

Edit Copy Hide

.flex-container {
  display: flex;
}

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

• The .flex-container class is defined with display: flex, making it a flex container.
• Inside the container, three .flex-item divs are created.
• The background color, margin, and padding properties are applied to the flex items for visual styling.
• By default, the flex items are laid out in a row along the main axis.

Use our free live html editor to test the code

Edit Copy Hide

<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>

Edit Copy Hide

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

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

• In this example, the .flex-container class is modified with flex-direction: column, making the main axis vertical.
• The justify-content: center property centers the flex items along the main axis within the container.
• The height of the container is set to 300 pixels to demonstrate vertical alignment.

Use our free live html editor to test the code

Edit Copy Hide

<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>

Edit Copy Hide

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

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

• The flex-wrap: wrap property allows flex items to wrap to the next line if they exceed the width of the container.
• align-items: center vertically aligns the flex items along the cross axis, which is horizontal in this case.
• The height of the container is set to 200 pixels to demonstrate wrapping behavior.

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.