CSS Flexbox is a layout model that provides a flexible way to arrange and align elements within a container. It simplifies the process of creating responsive and dynamic layouts. Here's an example to illustrate the usage of CSS Flexbox: 

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
    }
    
    .item {
      flex: 1;
      padding: 10px;
    }
    
    .item:nth-child(odd) {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>
In the example above, we create a container with the class `.container` and three child elements with the class `.item`. The container has the `display: flex` property, which turns it into a flex container. The child items have the `flex: 1` property, which distributes the available space equally among them. This allows them to dynamically resize based on the container's width. The `.item:nth-child(odd)` selector applies a background color to alternate items to provide visual distinction. Conclusion : CSS Flexbox provides a powerful set of properties to control the layout and alignment of elements within a flex container. Some commonly used properties include `flex-direction`, `justify-content`, `align-items`, `flex-wrap`, and more. These properties allow you to control the direction, alignment, and wrapping behavior of flex items. By leveraging the flexbox model, you can easily create responsive layouts that adapt to different screen sizes and provide a consistent user experience across devices.