flex

공간에 지정
flex로 지정된 공간 안에서 요소는 기존html과 다르게 움직인다

flex-direction

flex박스 내부의 아이템이 배치되는 방향 결정(메인축 결정)

row : (default) 왼쪽 > 오른쪽

row-reverse : 오른쪽 > 왼쪽

column : 위 > 아래 (컬럼으로 바뀌면 메인 축이 위 아래로 바뀌고, 서브축이 좌우가 된다)

column : 아래 > 위

flex-wrap

내부 아이템이 flex 영역을 벗어나는 경우

nowrap : (default) 아이템 크기를 줄여 1줄로 배치

wrap : 내부 아이템 크기를 유지하고 다음 줄로 배치

justify-content

메인축 정렬 기준

center : 가운데 정렬

flex-start : (default) 메인축 시작 방향

flex-end : 메인축 끝방향

space-around : 각 아이템 별로 좌우 여백을 동일하게 맞춤 (컨텐츠-컨텐츠 사이는 2배가 됨)

space-evenly : 모든 간격이 동일

space-between : flex-start, flex-end에 각각 아이템을 붙이고 나머지를 같은 간격으로 맞춤

align-items

보조축 아이템이 1줄인 경우

align-content

보조축 아이템이 여러 줄인 경우

flex-start : (default) 보조축 시작 방향

flex-end : 보조축 끝방향

center : 보조축 가운데

align-self

보조축에 대한 해당 아이템의 정렬 기준

flex-grow

메인축에 공간이 남는 경우 요소를 늘려 가득 채울 때 비율을 설정

.div1{
    background-color: rgb(222, 85, 85);
    flex-grow: 1;
}
.div2{
    background-color: rgb(255, 176, 49);
    flex-grow: 1;
}
.div3{
    background-color: rgb(225, 235, 45);
    flex-grow: 1;
}