Css Align Items

CSS align items

Created By: chatGPT

The CSS property align-items is used in a flex container to specify the default alignment for items along the cross axis. This property is helpful for controlling the vertical alignment of items when the container has a defined height. The possible values for align-items include: flex-start, flex-end, center, baseline, and stretch.

 .container {
    display: flex;
    align-items: center;
}

To use align-items, first create a flex container with the display: flex; property. Then apply align-items to determine how child elements are aligned within the container.

 .flex-container {
    display: flex;
    height: 200px;
    background-color: #f0f0f0;
    align-items: flex-start;
}

Here's how each value behaves:

flex-start: aligns flex items to the start of the flex container.
flex-end: aligns flex items to the end of the flex container.
center: aligns flex items at the center of the flex container.
baseline: aligns flex items along their baseline.
stretch: stretches flex items to fill the container (this is the default).

.flex-start {
    align-items: flex-start;
}
.flex-end {
    align-items: flex-end;
}
.flex-center {
    align-items: center;
}
.flex-baseline {
    align-items: baseline;
}
.flex-stretch {
    align-items: stretch;
}

Example: This example demonstrates a flex container with items aligned in different ways.

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

In combination with justify-content, you can create a well-structured layout. While align-items determines the cross-axis alignment, justify-content handles the alignment along the main axis.

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}