Aligning Items Vertically
The align-items property governs the vertical arrangement of flex items. Its default value is stretch.
align-items: stretch | center | flex-start | flex-end | baseline;
Let's run the following examples to get where do we need it.
stretch
It means that we extend items to the entire length of the cross axis.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="cards-list">
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png"
alt="Joker"
width="64px"
/>
<p>Lorem, ipsum dolor.</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
alt="Alien"
width="64px"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita quos
voluptate velit asperiores dolores deleniti debitis autem aliquid quia
delectus.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
width="64px"
/>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li class="card">
.cards-list {
display: flex;
border: 1px solid khaki;
width: 660px;
}
.card {
border: 1px dashed navy;
padding: 10px;
width: 120px;
}
.card img {
display: block;
margin: 0 auto;
}
/* Remove default decorations */
ul {
list-style: none;
padding-left: 0;
}
center
Items are in the center of the cross axis.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="cards-list">
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png"
alt="Joker"
width="64px"
/>
<p>Lorem, ipsum dolor.</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
alt="Alien"
width="64px"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita quos
voluptate velit asperiores dolores deleniti debitis autem aliquid quia
delectus.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
width="64px"
/>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li class="card">
.cards-list {
display: flex;
align-items: center;
border: 1px solid khaki;
width: 660px;
}
.card {
border: 1px dashed navy;
padding: 10px;
width: 120px;
}
.card img {
display: block;
margin: 0 auto;
}
/* Remove default decoration */
ul {
list-style: none;
padding-left: 0;
}
flex-start
All items start at the beginning of the cross axis.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="cards-list">
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png"
alt="Joker"
width="64px"
/>
<p>Lorem, ipsum dolor.</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
alt="Alien"
width="64px"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita quos
voluptate velit asperiores dolores deleniti debitis autem aliquid quia
delectus.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
width="64px"
/>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li class="card">
.cards-list {
display: flex;
align-items: flex-start;
border: 1px solid khaki;
width: 660px;
}
.card {
border: 1px dashed navy;
padding: 10px;
width: 120px;
}
.card img {
display: block;
margin: 0 auto;
}
/* Remove default decorations */
ul {
list-style: none;
padding-left: 0;
}
flex-end
All items are in the end of the cross axis (in the end of the parent flex container).
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="cards-list">
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png"
alt="Joker"
width="64px"
/>
<p>Lorem, ipsum dolor.</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
alt="Alien"
width="64px"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita quos
voluptate velit asperiores dolores deleniti debitis autem aliquid quia
delectus.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
width="64px"
/>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li class="card">
.cards-list {
display: flex;
align-items: flex-end;
border: 1px solid khaki;
width: 660px;
}
.card {
border: 1px dashed navy;
padding: 10px;
width: 120px;
}
.card img {
display: block;
margin: 0 auto;
}
/* Remove default decorations */
ul {
list-style: none;
padding-left: 0;
}
baseline
All flex items are aligned based on their text content baseline.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="cards-list">
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png"
alt="Joker"
width="32px"
/>
<p>Lorem, ipsum dolor.</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
alt="Alien"
width="16px"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita quos
voluptate velit asperiores dolores deleniti debitis autem aliquid quia
delectus.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
width="64px"
/>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li class="card">
.cards-list {
display: flex;
align-items: baseline;
border: 1px solid khaki;
width: 660px;
}
.card {
border: 1px dashed navy;
padding: 10px;
width: 120px;
}
.card img {
display: block;
margin: 0 auto;
}
/* Remove default decorations */
ul {
list-style: none;
padding-left: 0;
}
1. What does the align-items property do?
2. Which of the following values can be used with the align-items property?
Tout était clair ?
Merci pour vos commentaires !
Section 4. Chapitre 4
