The align-content CSS property aligns the contents of the box as a whole within the box itself along the block/column/cross axis of the box.
object.style.alignContent = "value"; <'align-content'> = normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> normal Represents the default alignment for the content.
<baseline-position> = [ first | last ]? baseline first baseline Specifies participation in first-baseline alignment: aligns the alignment baseline of the box's first baseline set with the corresponding baseline of its baseline-sharing group.
last baseline Specifies participation in last-baseline alignment: aligns the alignment baseline of the box's last baseline set with the corresponding baseline of its baseline-sharing group.
baseline Computes to first baseline.
<content-distribution> = space-between | space-around | space-evenly | stretch space-between The alignment subjects are evenly distributed in the alignment container.
space-around The alignment subjects are evenly distributed in the alignment container, with a half-size space on either end.
space-evenly The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end.
stretch If the combined size of the alignment subjects is less than the size of the alignment container, any auto-sized alignment subjects have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.
<overflow-position> = unsafe | safe unsafe Regardless of the relative sizes of the alignment subject and alignment container, the given alignment value is honored.
safe If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were start.
<content-position> = center | start | end | flex-start | flex-end center Centers the alignment subject within its alignment container.
start Aligns the alignment subject to be flush with the alignment container's start edge in the appropriate axis.
end Aligns the alignment subject to be flush with the alignment container's end edge in the appropriate axis.
flex-start Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-start or cross-start side, as appropriate. Only used in flex layout.
flex-end Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-end or cross-end side, as appropriate. Only used in flex layout.
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: first baseline;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>first baseline</div>
<div>first baseline</div>
<div>first baseline</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: last baseline;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>last baseline</div>
<div>last baseline</div>
<div>last baseline</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: baseline;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>baseline</div>
<div>baseline</div>
<div>baseline</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: space-between;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>space-between</div>
<div>space-between</div>
<div>space-between</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: space-around;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>space-around</div>
<div>space-around</div>
<div>space-around</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: space-evenly;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>space-evenly</div>
<div>space-evenly</div>
<div>space-evenly</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: stretch;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>stretch</div>
<div>stretch</div>
<div>stretch</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: unsafe center;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 0;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>unsafe</div>
<div>unsafe</div>
<div>unsafe</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: safe center;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 0;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>safe</div>
<div>safe</div>
<div>safe</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: center;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>center</div>
<div>center</div>
<div>center</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: start;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>start</div>
<div>start</div>
<div>start</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: end;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>end</div>
<div>end</div>
<div>end</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: flex-start;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>flex-start</div>
<div>flex-start</div>
<div>flex-start</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
align-content: flex-end;
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>flex-end</div>
<div>flex-end</div>
<div>flex-end</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button><br>
<button onmouseover="myfunction(innerHTML)">normal</button><br>
<button onmouseover="myfunction(innerHTML)">first baseline</button>
<button onmouseover="myfunction(innerHTML)">last baseline</button>
<button onmouseover="myfunction(innerHTML)">baseline</button><br>
<button onmouseover="myfunction(innerHTML)">space-between</button>
<button onmouseover="myfunction(innerHTML)">space-around</button>
<button onmouseover="myfunction(innerHTML)">space-evenly</button>
<button onmouseover="myfunction(innerHTML)">stretch</button><br>
<button onmouseover="myfunction(value)" value="unsafe center">unsafe</button>
<button onmouseover="myfunction(value)" value="safe center">safe</button><br>
<button onmouseover="myfunction(innerHTML)">center</button>
<button onmouseover="myfunction(innerHTML)">start</button>
<button onmouseover="myfunction(innerHTML)">end</button>
<button onmouseover="myfunction(innerHTML)">flex-start</button>
<button onmouseover="myfunction(innerHTML)">flex-end</button>
<div class="myclass">
<div>align-content</div>
<div>align-content</div>
<div>align-content</div>
</div>
<script>
function myfunction(myparameter)
{
const mystyle = document.querySelector(".myclass").style;
mystyle.alignContent = myparameter;
mystyle.height = "100%";
if(myparameter.includes("safe"))
{
mystyle.height = "0";
}
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
body
{
height: 100vh;
}
.myclass
{
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
height: 100%;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<button>initial</button><br>
<button>normal</button><br>
<button>first baseline</button>
<button>last baseline</button>
<button>baseline</button><br>
<button>space-between</button>
<button>space-around</button>
<button>space-evenly</button>
<button>stretch</button><br>
<button value="unsafe center">unsafe</button>
<button value="safe center">safe</button><br>
<button>center</button>
<button>start</button>
<button>end</button>
<button>flex-start</button>
<button>flex-end</button>
<div class="myclass">
<div>align-content</div>
<div>align-content</div>
<div>align-content</div>
</div>
<script>
function myfunction(myparameter)
{
const mystyle = document.querySelector(".myclass").style;
mystyle.alignContent = myparameter;
mystyle.height = "100%";
if(myparameter.includes("safe"))
{
mystyle.height = "0";
}
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>