13. flexbox 3 (align-items)

align-items: flex-end;

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    justify-content: space-between;
    align-items: flex-end;
}
.item{
	width: 60px;
    height: 60px;
    background-color: teal;
}

align-items: flex-start;

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    justify-content: space-between;
    align-items: flex-start;
}
.item{
	width: 60px;
    height: 60px;
    background-color: teal;
}

align-items: center;

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    justify-content: space-between;
    align-items: center;
}
.item{
	width: 60px;
    height: 60px;
    background-color: teal;
}

align-self: flex-start;

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    justify-content: space-between;
    align-items: center;
}
.item{
	width: 60px;
    height: 60px;
    background-color: teal;
}
.self {
	align-self: flex-start;
}

align-self: flex-end;

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    justify-content: space-between;
    align-items: center;
}
.item{
	width: 60px;
    height: 60px;
    background-color: teal;
}
.self {
	align-self: flex-end;
}

display: flex에서 부모의 크기보다 자식의 크기가 커질 경우

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
}
.item{
	width: 120px;
    height: 60px;
}

.item 3개의 합이 360px 이므로 container보다 커지게 되면 삐져 나가지 않고 자식요소들의 크기를 줄여 버린다.

기본적으로 display: flex;의 상태에서는 flex-wrap: nowrap; 상태이다.

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    flex-wrap: nowrap;
}

flex-wrap: wrap;

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    flex-wrap: wrap;
}

주축으로 진행되던 하위 요소들의 도합크기가 flex컨테이너의 축 크기보다 커졌을 때 이것을 두 행이상으로 처리 할 수 있도록 하겠다.

flex-wrap: wrap-reverse;

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    flex-wrap: wrap-reverse;
}

wrap을 하긴 하는데 반대 방향으로 한다.