Wartość normal jest domyślną wartością właściwości align-items.
Wartość normal właściwości align-items elementu HTML typu flex lub inline-flex działa na takiej samej zasadzie jak wartość stretch.
align-items:normal;
Ze względu na to, iż przykładowy element "div#flexbox" jest typu "flex" wartość domyślna właściwości "align-items" przykładowego elementu "div#flexbox" działa na takiej samej zasadzie jak wartość "stretch", a co za tym idzie rozmiar wysokości obszaru zawartości znajdujących się w anonimowym bloku elementów dzieci przykładowego elementu "div#flexbox" został rozciągnięty w obszarze anonimowego bloku wzdłuż osi poprzecznej przykładowego elementu "div#flexbox".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#flexbox {
display:flex;
flex-wrap:wrap;
height:200px;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
#flexbox > div {
padding:0.5em;
}
#flexbox > :nth-child(1) {
background-color:red;
}
#flexbox > :nth-child(2) {
background-color:orange;
}
#flexbox > :nth-child(3) {
background-color:yellow;
}
</style>
</head>
<body>
<div id="flexbox">
<div>div - 1</div>
<div>div - 2</div>
<div>div - 3</div>
</div>
</body>
</html>
Za pomocą wartości flex-start właściwości align-items możemy sprawić, że znajdujące się w anonimowym bloku elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w obszarze wspomnianego anonimowego bloku wzdłuż osi poprzecznej, w kierunku początku tejże osi poprzecznej.
align-items:flex-start;
Znajdujące się w anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane w obszarze anonimowego bloku wzdłuż osi poprzecznej przykładowego elementu "div#flexbox", w kierunku początku osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "align-items" wraz z wartością "flex-start".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#flexbox {
display:flex;
flex-wrap:wrap;
align-items:flex-start;
height:200px;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
#flexbox > div {
padding:0.5em;
}
#flexbox > :nth-child(1) {
background-color:red;
}
#flexbox > :nth-child(2) {
background-color:orange;
}
#flexbox > :nth-child(3) {
background-color:yellow;
}
</style>
</head>
<body>
<div id="flexbox">
<div>div - 1</div>
<div>div - 2</div>
<div>div - 3</div>
</div>
</body>
</html>
Za pomocą wartości flex-end właściwości align-items możemy sprawić, że znajdujące się w anonimowym bloku elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w obszarze wspomnianego anonimowego bloku wzdłuż osi poprzecznej, w kierunku końca tejże osi poprzecznej.
align-items:flex-end;
Znajdujące się w anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały wyrównane w obszarze anonimowego bloku wzdłuż osi poprzecznej przykładowego elementu "div#flexbox", w kierunku końca osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "align-items" wraz z wartością "flex-end".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#flexbox {
display:flex;
flex-wrap:wrap;
align-items:flex-end;
height:200px;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
#flexbox > div {
padding:0.5em;
}
#flexbox > :nth-child(1) {
background-color:red;
}
#flexbox > :nth-child(2) {
background-color:orange;
}
#flexbox > :nth-child(3) {
background-color:yellow;
}
</style>
</head>
<body>
<div id="flexbox">
<div>div - 1</div>
<div>div - 2</div>
<div>div - 3</div>
</div>
</body>
</html>
Za pomocą wartości center właściwości align-items możemy sprawić, że znajdujące się w anonimowym bloku elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyśrodkowane w obszarze wspomnianego anonimowego bloku względem początku oraz końca osi poprzecznej.
align-items:center;
Znajdujące się w anonimowym bloku elementy dzieci przykładowego elementu "div#flexbox" zostały wyśrodkowane w obszarze anonimowego bloku względem początku oraz końca osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "align-items" wraz z wartością "center".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#flexbox {
display:flex;
flex-wrap:wrap;
align-items:center;
height:200px;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
#flexbox > div {
padding:0.5em;
}
#flexbox > :nth-child(1) {
background-color:red;
}
#flexbox > :nth-child(2) {
background-color:orange;
}
#flexbox > :nth-child(3) {
background-color:yellow;
}
</style>
</head>
<body>
<div id="flexbox">
<div>div - 1</div>
<div>div - 2</div>
<div>div - 3</div>
</div>
</body>
</html>
Za pomocą wartości stretch właściwości align-items możemy sprawić, że znajdujące się w anonimowym bloku elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny zostaną wyrównane w stylu stretch. Styl stretch oznacza, że jeżeli wzdłuż osi poprzecznej w obszarze anonimowego bloku, w którym znajdują się dane elementy dzieci, pozostała wolna przestrzeń, wtedy na podstawie rozmiaru tej wolnej przestrzeni w obszarze anonimowego bloku zostanie dokonane rozciągnięcie znajdującego się na wspomnianej osi poprzecznej rozmiaru obszaru zawartości elementów dzieci.
Rozmiar szerokości obszaru zawartości elementu dziecka może zostać rozciągnięty tylko w przypadku, gdy wartością właściwości width elementu dziecka jest wartość auto, natomiast rozmiar wysokości obszaru zawartości elementu dziecka może zostać rozciągnięty tylko w przypadku, gdy wartością właściwości height elementu dziecka jest wartość auto. Gdy docelowy rozmiar obszaru zawartości danego elementu dziecka elementu HTML tworzącego układ elastyczny nie może zostać rozciągnięty, wtedy wartość "stretch" dla danego elementu dziecka działa na takiej samej zasadzie jak wartość flex-start.
align-items:stretch;
Rozmiar wysokości obszaru zawartości znajdujących się w anonimowym bloku elementów dzieci przykładowego elementu "div#flexbox" został rozciągnięty w obszarze anonimowego bloku wzdłuż osi poprzecznej przykładowego elementu "div#flexbox", ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "align-items" wraz z wartością "stretch".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#flexbox {
display:flex;
flex-wrap:wrap;
align-items:stretch;
height:200px;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
#flexbox > div {
padding:0.5em;
}
#flexbox > :nth-child(1) {
background-color:red;
}
#flexbox > :nth-child(2) {
background-color:orange;
}
#flexbox > :nth-child(3) {
background-color:yellow;
}
</style>
</head>
<body>
<div id="flexbox">
<div>div - 1</div>
<div>div - 2</div>
<div>div - 3</div>
</div>
</body>
</html>
