Css Align Content

CSS align content

Created By: chatGPT

The align-content property in CSS is used in a flex container or grid layout to control the alignment of the flex or grid items along the cross axis. It should be applied when you have multiple lines of items. This property only takes effect when the flex or grid container has space in the cross axis.

display: flex;
flex-wrap: wrap;
align-content: center;

Here are the most common values you can use with align-content:

flex-start: Items are packed toward the start of the flex direction.
flex-end: Items are packed toward the end of the flex direction.
center: Items are centered in the flex container.
space-between: Items are evenly distributed in the line; the first item is at the start and the last item is at the end.
space-around: Items are evenly distributed with equal space around them.
stretch: Items are stretched to fill the container (this is the default).

align-content: space-between;

To see align-content in action, consider the following example where multiple items are displayed within a flex container with varying alignments:

In this example, we'll create a flexbox that demonstrates the use of align-content with different settings.

.container {
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    align-content: space-around;
}

.item {
    flex: 0 1 100px;
    height: 50px;
    margin: 10px;
    background-color: lightblue;
}

<div class='container'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>