css flex코딩 align-items

 

align-items 는 세로로 정렬하는 속성입니다.

 

stretch(default값)

.container{
    display:flex;
    align-items: stretch;
    height:100vh;
    background: gainsboro;
}

---

 

end

.container {
    display: flex;
    align-items: end;
    height: 100vh;
}

 

---

start

.container {
    display: flex;
    align-items: start;
    height: 100vh;
    background: gainsboro;
}

 

---

center

.container {
    display: flex;
    align-items: center;
    height: 100vh;
    background: gainsboro;
}

 

 

---

 

baseline

item들을 텍스트 베이스라인 기준으로 정렬

.container {
    display: flex;
    align-items: baseline;
    height: 100vh;
    background: gainsboro;
}