CSS Flexbox

 CSS Flexbox

CSS Flexbox is another layout system in CSS that allows you to create flexible and responsive layouts. It uses a container and flex items to arrange and align content. Here's an example:

.container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.item {

  background-color: #eee;

  padding: 20px;

  flex: 1;

}

In this code, we first define a flex container with the display: flex property. We then set the horizontal alignment of the items with the justify-content property and the vertical alignment with the align-items property.

Next, we define the styles for the items inside the flex container. In this example, we set the background color, padding, and the flex property, which specifies how much the item should grow or shrink to fill the available space.