FlexBox

FlexBox를 사용하기 위해선 부모 선택자에

display: flex;

라는 속성이 적용되어 있어야 한다.

그리고 나서 자식 선택자에 다음과 같은 속성들을 사용할 수 있다.

// justify-content 수평정렬
// justify 신이 옳다고 하다	justify content 콘텐츠정당화

.아무개클래스네임 {
	justify-content: flex-start;	// default (기본값)
    	justify-content: flex-end; 	// 맨오른쪽
        justify-content: center;	// 가운데
        justify-content: space-between // 양옆으로 위치 그리고 가운데
        justify-content: space-around  // 양옆으로 그리고 가운데로 위치하되, 양옆에 조금의 공간 생성
        
    
// align-items (정렬 - 아이템) 	// 수직정렬

.아무개클래스네임 {
	align-items: flex-start; // (default)
    	align-items: flex-end;	 // 맨 아래
    	align-items: center;	 // 가운데
    	align-items: baseline;
   	align-items: stretch;
}
    
    
// flex-direction (flex 방향)
//default 순서는 왼쪽에서 오른쪽

.아무개클래스네임 {
    flex-direction: row;	//왼쪽에서 오른쪽 (기본값)
    flex-direction: row-reverse;	// 오른쪽에서 왼쪽
    flex-direction: column;	// 기둥이란 뜻, 기둥처럼 위에서 아래
    flex-direction: column-reverse;	// 아래에서 위
}
    

// flex-wrap
// nowrap(default)	(wrap === 랩(주방에서 쓰는 랩맞음))
// ->  모든 요소들을 한 줄에 정렬
// wrap 
// -> 요소들을 여러 줄에 걸쳐 정렬
    
ex)
#pond {
	display : flex;
	flex-direction: column;
	flex-wrap: wrap;
}
    
//  flex-flow
//    :flex-direction과 flex-wrap이 자주 같이쓰이기 때문에 아예 두개의 기능
//     을 합친 flex-flow를 만듬



#pond {
	display : flex;
	flex-direction: column;
	flex-wrap: wrap;
}

와

flex-flow: column wrap

같은 뜻임.

레이아웃
=> https://d2.naver.com/helloworld/8540176