css flex 코딩 align-content

 

align-content

flex-wrap:wrap:을 설정해서 여러 줄이 되었을 때 수직 방향을 정렬하는 속성입니다.

 

 

stretch

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

 

---

 

 

flex-start

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

 

 

---

 

flex-end

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    height: 100vh;
    background: gainsboro;
}

 

 

---

 

center

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

 

 

---

 

space-around

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    height: 100vh;
    background: gainsboro;
}

 

---

space-between

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    height: 100vh;
    background: gainsboro;
}

 

---

 

space-evenly

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
    height: 100vh;
    background: gainsboro;
}