FLEX 레이아웃

*인프런강의자료 참고했습니다. 

 

html 요소들을 쉽게 배치할 수 있는 flex레이아웃이라고 있다. 

 

flex 방향 설정하기

 

 

수평으로 정렬을 원할시에  flex의 기본설정은 수평(row)이기에 flex-direction이 없어도 되긴한다. 

.parent{
	display:flex;
    flex-direction:row;
}

 

수직으로 정렬을 원할시에 ,div는 기본적으로 수직이기에 flex를 안해도 되긴하다. 

 

.parent{
	display:flex;
    flex-direction:column;
}

 

아이템 정렬방향-수평의 기준 justify-content

 

 

justify-content는 영역안에 있는 아이템을 어떻게 정렬할지 설정한다. 

.parent{
	display:flex;
    justify-content:center;
    }

이렇게 되면 아이템들이 center에 정렬된다. 

 

아이템정렬방향 -수직방향 align-items

 

위의 justify-content는 아이템이 수평방향에서 어떻게 정렬을 해야할지며, 

align-items는 아이템이 수직방향기준에서 어떻게 정렬을 해야할지 정한다. 

 

.parent{
	display:flex;
    align-items:flex-start;
    }

이렇게되면 아이템들이 parent에 붙게된다.