revision:
- specifies how flex lines are distributed along the cross axis in a flexbox container. In flexbox layout, the main axis is in the flex-direction (default is 'row', horizontal), and the cross axis is perpendicular to the main axis (default is 'column', vertical).
Use the justify-content property to align the items on the main axis (horizontally).
The align-content property can also be used on a grid container to align grid items in the block direction. For pages in English, block direction is downward and inline direction is left to right.
Property values
stretch : default value; lines stretch to take up the remaining space
center : lines are packed toward the center of the flex container
flex-start : lines are packed toward the start of the flex container
flex-end : lines are packed toward the end of the flex container
space-between : lines are evenly distributed in the flex container
space-around : lines are evenly distributed in the flex container, with half-size spaces on either end
space-evenly : lines are evenly distributed in the flex container, with equal space around them
initial : sets this property to its default value.
inherit : inherits this property from its parent element
example: align-content property
<div class="grid">
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<div id="container">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:coral;"></div>
</div>
</div>
<style>
#main {width: 4vw; height: 20vw; border: 0.1vw solid darkgrey; display: flex; flex-wrap: wrap;
align-content: center;}
#main div {width: 4vw; height: 4vw;}
#container {width: 20vw; height: 30vw; border: 0.11vw solid darkgreen; display: grid;
grid-template-columns: 1fr 1fr 1fr; align-content: end;}
#container > div {width: 6vw; height: 7vw;
</style>
The align-items property specifies the default alignment for items inside a flexbox or grid container.
In a flexbox container, the flexbox items are aligned on the cross axis, which is vertical by default (opposite of flex-direction). In a grid container, the grid items are aligned in the block direction. For pages in English, block direction is downward and inline direction is left to right.
For this property to have any alignment effect, the items need available space around themselves in the appropriate direction.
Tip: Use the align-self property of each item to override the align-items property.
Property values
normal : default; behaves like 'stretch' for flexbox and grid items, or 'start' for grid items with a defined block size.
stretch : items are stretched to fit the container
center : items are positioned at the center of the container
flex-start : items are positioned at the beginning of the container
flex-end : items are positioned at the end of the container
start : items are positioned at the beginning of their individual grid cells, in the block direction
end : items are positioned at the end of the their individual grid cells, in the block direction
baseline : Items are positioned at the baseline of the container
initial : sets this property to its default value.
inherit : inherits this property from its parent element
example: align-items property
<div class="grid">
<div id="main-1">
<div style="background-color:coral;min-height:30px;">RED</div>
<div style="background-color:lightblue;min-height:50px;">BLUE</div>
<div style="background-color:lightgreen;min-height:190px;">Green div with more content.</div>
</div>
<div id="container-1">
<div style="background-color:coral;min-height:30px;">RED</div>
<div style="background-color:lightblue;min-height:50px;">BLUE</div>
<div style="background-color:lightgreen;min-height:190px;">GREEN</div>
<div style="background-color:lightgreen;min-height:190px;">GREEN</div>
<div style="background-color:coral;min-height:30px;">RED</div>
<div style="background-color:lightblue;min-height:50px;">BLUE</div>
</div>
</div>
<style>
#main-1 {width: 20vw; height: 20vw; border: 0.1vw solid blue; display: flex; align-items: center;}
#main-1 div {flex: 1; border: 0.11vw solid indigo; display: flex; align-items: center;}
#container-1 {width: 70%; aspect-ratio: 2/1; border: 0.1vw solid blue; display: grid;
grid-template-columns: 1fr 1fr 1fr; align-items: start;}
#container-1 div {border: 0.1vw solid indigo;}
</style>
The align-self property specifies the alignment in the block direction for the selected item inside a flexbox or grid container.For pages in English, block direction is downward and inline direction is left to right.
Tip: To align a grid item in the inline direction instead of the block direction, use justify-self or justify-items properties.
Note: The align-self property overrides the grid or flexible container's align-items property.
Property values
auto : default; the element inherits its parent container's align-items property, or "stretch" if it has no parent container
stretch : the element is positioned to fit the container
center : the element is positioned at the center of the container
flex-start : the element is positioned at the beginning of the container
flex-end : the element is positioned at the end of the container
start : items are positioned at the beginning of their individual grid cells, in the block direction
end : items are positioned at the end of the their individual grid cells, in the block direction
baseline : the element is positioned at the baseline of the container
initial : sets this property to its default value.
inherit : inherits this property from its parent element
example: align-self property
<div class="grid">
<div id="main-2">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;" id="myBlueDiv">BLUE</div>
<div style="background-color:lightgreen;">Green div with more content.</div>
</div>
<div id="container-2">
<div class="normalDiv"></div>
<div id="myDiv">myDiv</div>
<div class="normalDiv"></div>
<div class="normalDiv"></div>
</div>
</div>
<style>
#main-2 {width: 20vw; height: 20vw; border: 0.11vw solid burlywood; display: flex; align-items: flex-start;}
#main-2 div { flex: 1;}
#myBlueDiv {align-self: center;}
#container-2 { width: 70%; aspect-ratio: 3/2; border: solid burlywood 0.1vw; display: grid; grid-template-columns: 1fr 1fr;}
#container-2 > div { width: 60%; aspect-ratio: 2; margin: 0.2vw;}
.normalDiv {background-color: lightgreen;}
#myDiv {border: solid blue 0.3vw; background-color: coral; align-self: end;}
</style>