FlexBox_1

▶ FlexBox : HTML에서 유연하게 행과 열 형태로 레이아웃을 구성하는 메서드

 

 

▶ 기본구성

• FlexContainer : flex-item을 감싸고 있는 부모 요소
• FlexItem : flex-container 안에 있는 여러개의 자식 요소

▶ 기본 생성 : 부모요소에 display:flex 속성 부여

<div style="display:flex">

</div>

.flex-container{
	display:flex;
}

 

▶ Flex-Direction : Flex Item은 주축(Main Axis)에 따라 정렬됨

• row(기본) : 주축의 방향이 왼쪽에서 오른쪽으로
• column : 주축의 방향이 위에서 아래로

.flex-container{
	display:flex;
    flex-direction:row;
    			  //column
}