scrimba
Responsive Design
Taking flexbox to the next level
Aligning individual elements with align-self
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Aligning individual elements with align-self
AboutCommentsNotes
Aligning individual elements with align-self
Expand for more info
styles.css
run
preview
console
* { box-sizing: border-box; }

body {
margin: 0;
background: #2C73D2;
color: #fff;
text-align: center;
}

.flex-container {
border: 10px solid #F9F871;
width: 80%;
margin: 0 auto;
padding: .25em;

display: flex;
height: 50vh;
}

.flex-item {
background: #8BEE86;
margin: .5em;
padding: .5em;
color: #424656;

width: 200px;
}

.flex-item-1 {
background: plum;
}

.flex-item-2 {

}

.flex-item-3 {

}
Console
index.html
-1:37